Example of Webpack configuration?

I’m struggling to implement this package and material-components-web properly with Webpack 2. Do any of you use it and could provide an example config that imports the mdc-web Sass files so they can be themed?

Here’s what I think are relevant parts of my config:

var webpackConfig = module.exports = {
  context: path.resolve(__dirname, '..'),
  entry: {
    'main': [
      './src/theme/main.scss',
      './src/client.js'
    ]
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          }, {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 3,
              sourceMap: true,
              localIdentName: '[local]___[hash:base64:5]'
            }
          }, {
            loader: 'autoprefixer-loader',
            options: {
              browsers: 'last 2 version'
            }
          }, {
            loader: 'resolve-url-loader',
          }, {
            loader: 'sass-loader', // compiles Sass to CSS
            options: {
              outputStyle: 'expanded',
              sourceMap: true,
              includePaths: ['../src', '../node_modules', '../node_modules/@material/*']
                .map(d => path.join(__dirname, d))
                .map(g => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          },
        ],
      }
    ]
  },
  resolve: {
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.json', '.js', '.jsx', '.scss']
  }
};

and I start my main.scss with this:

$mdc-theme-primary: #4a90e2;
$mdc-theme-accent: #f22745;
$mdc-theme-background: #fff;
@import '~material-components-web/material-components-web.scss';

All my app scss files load fine, but the material-components-web import doesn’t seem to work at all but also doesn’t throw any errors.

If I add 'material-components-web/dist/material-components-web.min.css' to entry:main then it works but then I’m obviously unable to change the theme as easily so that seems wrong. What should I do here?

[kradio3]

Solution is to use two different loaders for ‘global.css’ and ‘modules’ https://github.com/css-modules/css-modules/issues/113#issuecomment-184127881 Instead of ‘global’ in regexp you can set ‘node_modules’ or ‘material-components-web’ I did’t try it, but looks fine 😃

[demiters]

Just tried it, works like a charm! Thanks! So, as a minimal config I think yours would be fine to put in docs. Not sure if many people would struggle with different setups like I did, though.