SCSS Modules in Redwood

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = (config) => {
  const isDevelopment = process.env.NODE_ENV !== 'production';

  config.plugins.push(new MiniCssExtractPlugin({
    filename: isDevelopment ? '[name].css' : '[name].[hash].css',
    chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css',
  }));

  config.module.rules[0].oneOf.unshift({
    test: /\.module\.scss$/i,
    loader: [
      isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          modules: true,
          sourceMap: isDevelopment
        }
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: isDevelopment
        }
      }
    ]
  });

  config.resolve.extensions.push('.scss');
  return config;
}