webpack config to use both css and scss files

Question

I want to import a .css file in my app.jsx which has some theme specific code, but then my components are styled using scss files.

How can I do that? Here is my webpack config which works only for scss files, I thought i could put a wildcard and it'd work for both.

test: /\.(s?)css$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
  {
    loader: 'sass-loader'
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]

Answer 1

Try this. I have tested it. Worked well for me.

{
    test: /\.(sa|sc|c)ss$/,
    use: [
            {
                loader: 'style-loader',
                options: {
                    hmr: true
                }
            },
            {
                loader: 'css-loader',
                options: {
                   modules: true,
                   importLoaders: 1,
                   localIdentName: '[name]__[local]___[hash:base64:5]',
                },
           },
           {
               loader: 'postcss-loader',
               options: {
                   plugins: [autoprefixer({ browsers: ['> 1%'] })]
               },
            },
            'sass-loader'
        ],
}

Also small advice: don't use 'last 3 versions' like this: plugins: [autoprefixer({ browsers: ['last 3 versions'] })] it will include a lot of dead browsers. Check it here.

'> 1%' is better

Answer 2

You can write different rules for css and scss files where u can remove sass loader for css files.

test: /\.scss$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
  {
    loader: 'sass-loader'
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]


test: /\.css$/,
use: [
  {
    loader: 'style-loader',
    options: {
      hmr: true
    }
  },
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
//removed sass loader
  {
    loader: 'postcss-loader',
    options: {
      plugins: [autoprefixer({ browsers: ['last 3 versions'] })]
    }
  }
]

Below is my personal setup for css & scss files

webpack.config.js

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: 3,
                        },
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },

postcss.config.js

module.exports = {
    plugins: [
        require('postcss-cssnext')({
            warnForDuplicates: false,
            features: {
                customProperties: false,
            },
        }),
        require('postcss-flexbugs-fixes')(),
        process.env.NODE_ENV === 'production'
            ? require('cssnano')({
                    preset: 'default',
              })
            : '',
    ],
};