webpack/sass-loaderでimport毎に共通ファイルを読み込ませる

Webpackを使ってReactなどのコンポーネントファイルから同じ粒度に分割したCSS/Sassを書いているとき、
Sassの変数やmixinなど、Globalにimportしておきたいファイルについて頭を悩ませることがあります。

sass-loader に data optionを設定するとうまいこと実現できます。
sass-loader/environment-variables

先に言っておくと、 data は node-sass を通して Libsass へオプションをそのまま通しているだけのようです。
node-sass/data

サンプルコード

Webpack設定

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /.scss?$/,
        use: [
          "style-loader",
          "css-loader",
          {
          loader: 'sass-loader',
          options: {
            data: "@import 'global-imports.scss';",
            includePaths: [path.resolve(__dirname, 'app/styles/')]
          },
        }],
        exclude: /node_modules/,
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8080
  }
};

Reactのビルドを含めているため、ごちゃごちゃしていますね。
関係のある部分だけを抽出します。

      {
        test: /.scss?$/,
        use: [
          "style-loader",
          "css-loader",
          {
          loader: 'sass-loader',
          options: {
            data: "@import 'global-imports.scss';",
            includePaths: [path.resolve(__dirname, 'app/styles/')]
          },
        }],
        exclude: /node_modules/,
      }

data には String が設定可能で、これはsass/loaderによって読み込まれたファイルの先頭に自動的に差し込まれます。

この例では app/styles/_global-imports.scss にimportしたいファイルをまとめて記述することとし、styles/_global-imports.scss から変数設定用ファイルをimportして、各コンポーネントで変数の値を利用しています。

includePaths は絶対パスでimport時に読みに行くPathを追加しています。
node_modules/ 以下をこちらに含めればnpmでインストールしたライブラリの一部分を利用することもできるかもしれませんね。

まとめ

Sassというと、一つのCSSに全てを統合する使い方をイメージしますが、こういった柔軟なコンパイルをすることも可能なようです。
sass-loaderのドキュメントでは環境毎に異なった変数設定ファイルを読み込む使用例が紹介されています。

以上です。

追記（2020年４月５日）

sass-resources-loader を利用しても同じことができます。