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年4月5日)
sass-resources-loader を利用しても同じことができます。