Webpack is not compiling/including my scss files in development

Question

I am developing a react app with webpack. My problem is that my scss files are either not compiled properly or not included in my development mode. But after building for production, those styles are included. This issue is very confusing. Please help me on this.

My webpack configuration for handling scss files in development config is following:

  {
    test: /\.scss$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss', 
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
      'sass-loader'
    ],
  },

For production its following:

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
      Object.assign(
        {
          fallback: require.resolve('style-loader'),
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: true,
              },
            },
            {
              loader: require.resolve('postcss-loader'),
              options: {
                ident: 'postcss',
                plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                    browsers: [
                      '>1%',
                      'last 4 versions',
                      'Firefox ESR',
                      'not ie < 9', 
                    ],
                    flexbox: 'no-2009',
                  }),
                ],
              },
            },
            {
              loader: require.resolve('sass-loader')
            },
          ],
        },
        extractTextPluginOptions
      )
    ),
  },

EDIT:

It works when I remove scss files from my project and write only css files. In webpack I remove sass-loader from end and write test for /.css$/.

But then I need to use sass files only, how to do that? Please help.

Answer 1

So I had a similar issue running the sass-loader where all the child/mixin/variables sass files kept being compiled on their own. A simplified example of my directory structure looked like this:

entry.js
webpack.config.js
sass/
|-sass/bootstrap.override.scss
|-sass/partials/
|--|-sass/partials/_variables.scss
|--|-sass/partials/_something.scss
|--|-sass/partials/mixins/
|--|--|-sass/partials/mixins/_mixins.scss 

Basically, bootstrap.override.scss was including all the information from all the subdirectories and therefore was the only thing that needed to be packed since it would then compiles all the helper files in the right order. Here's my config:

            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        "postcss-loader",
                        "sass-loader"
                    ]
                })
            },

After some complicated exclude statements and parsing @includes to the mixins via webpack-append , I realized that I dumbly set my entry.js to walk down the subdirectories when it was unlogical to.

So I changed my entry.js file's sass line to: require.context("./sass", false, /.scss$/)

I know this seems a little simple, but the overlook caused me a headache. Hope this helps someone!