エンジニアの覚え書き

web系エンジニアの技術メモを主に投稿していきます。

css-loaderのmodules optionを理解した

boilerplateのwebpackの設定をあまり理解せずに使っていると、新しく何かしようとした時にwebpack周りで困ることは(私にとっては)よくある話で、今回は困った結果、css-loaderのmodules optionを理解した。

今回理解したこと

CSS modulesではないcomponentをwebpackに組み込む場合、modules: falsecss-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むずい。