Webpack 3 + Sass Loader : Cannot use scss as a module

Question

I'm using Webpack 3 + Sass Loader + Sass Resources Loader to build a multi theme React App.

This is my webpack.config :

 {
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: true,
        minimize: IS_PRODUCTION,
        sourceMap: IS_DEVELOPMENT,
        localIdentName: IS_DEVELOPMENT ? '[name]__[local]__[hash:8]' : '[hash:8]'
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: IS_DEVELOPMENT,
        plugins: postCssPlugins,
      }
    },
  ],
}),
  },  
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
  use: [
    {
      loader: 'css-loader',
      options: {
        sourceMap: IS_DEVELOPMENT,
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: IS_DEVELOPMENT
      }
    },
    {
      loader: 'sass-resources-loader',
      options: {
        sourceMap: IS_DEVELOPMENT,
        resources: [
          './common/style/flaticon/_flaticon_class.scss',
          `./common/branding/${BRANDING}/${BRANDING}.scss`,
          './common/style/bootstrap/_general_variables.scss',
          './node_modules/bootstrap/scss/bootstrap-reboot.scss', // functions, variables, mixins, reboot
          './node_modules/bootstrap/scss/_root.scss',
          './node_modules/bootstrap/scss/_type.scss',
          './node_modules/bootstrap/scss/_images.scss',
          './node_modules/bootstrap/scss/_grid.scss',
          './node_modules/bootstrap/scss/_utilities.scss',
        ]
      },
    },
  ]
})

},

Actually, It's working fine, but when I try to import my scss files into my react component and exploit it like a css file, the class name is undefined.

In my component file :

import styles from './ActivityGridItem.scss';
...
<div className={`m-2 ${styles.activityTypeIcon}`}></div>

Normally, the style .activityTypeIcon should be applied to my div, but right now it's undefined.

I try to add the options "modules: true" like this :

test: /\.scss$/,
loader: ExtractTextPlugin.extract({
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: IS_DEVELOPMENT,
      }
    },

But then, every sass files are recognized as a module and I cannot use the global boostrap class, as row, col, m-*, etc.

eldarg eldarg · Accepted Answer · 2018-06-29T14:17:40

There's a couple of ways to do it

You can use global block in css-modules to make bootstrap classes global.
You can create 2 loaders, one with css-modules enabled and another with global styles and differentiate them somehow. For example, you might make all files that end with .module.scss use modules: true.

Webpack 3 + Sass Loader : Cannot use scss as a module

1 Answers