Sass-friendly CSS Modules

webpack.config.js

// The motivation is to avoid having to explicitly import infrastructure Sass files
// (those containing only variables/mixins/functions etc). This enables a more classic
// Sass dev experience, with the end result still being good ol' CSS Modules.

// First, make a shared.scss file which imports all of your Sass variables, mixins and functions.
// Note that nothing in that bundle should create CSS, otherwise, that CSS will be prepended to any
// Sass file you import with CSS modules. Then:

// With Webpack 1, add a sassLoader options object to your webpack.config.js module:
module.exports = {
  ...
  sassLoader: {
    data: '@import "shared.scss";',
    includePaths: [
        path.resolve(__dirname, '/app/css')
    ]
  }
};

// In Webpack 2, that object has moved into the loader config:
module.exports = {
  //...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: "sass-loader",
        options: {
          data: '@import "shared.scss";',
          includePaths: [
              path.resolve(__dirname, '/app/css')
          ]
        }
      }]
    }]
  }
};