css-loaderのmodules optionを理解した
boilerplateのwebpackの設定をあまり理解せずに使っていると、新しく何かしようとした時にwebpack周りで困ることは(私にとっては)よくある話で、今回は困った結果、css-loaderのmodules optionを理解した。
今回理解したこと
CSS modulesではないcomponentをwebpackに組み込む場合、modules: false
でcss-loaderを通さないといけない。文章にしてみると当たり前だけど、正しく理解してないと困ってしまう。
webpack.config.js
include, excludeを使って既存の設定とは別のloaderを通してあげれば良い。今回はreact-componentのrc-sliderを組み込んだ。
test: /\.s?css$/, exclude: /node_modules\/rc-slider/, use: [ { loader: 'isomorphic-style-loader', }, { loader: 'css-loader', options: { // CSS Loader https://github.com/webpack/css-loader importLoaders: 1, sourceMap: isDebug, // CSS Modules https://github.com/css-modules/css-modules modules: true, localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]', // CSS Nano http://cssnano.co/options/ minimize: !isDebug, discardComments: { removeAll: true }, }, }, { loader: 'postcss-loader', options: { config: { path: './postcss.config.js', }, }, }, ], }, { test: /\.s?css$/, include: /node_modules\/rc-slider/, use: [ { loader: 'isomorphic-style-loader', }, { loader: 'css-loader', options: { // CSS Loader https://github.com/webpack/css-loader importLoaders: 1, sourceMap: isDebug, // CSS Modules https://github.com/css-modules/css-modules modules: false, // CSS Nano http://cssnano.co/options/ minimize: !isDebug, discardComments: { removeAll: true }, }, }, ], },
webpackむずい。