Webpack split scss into separate css files

Question

I'm writing a React application, using webpack and sass. Now i want to try those CSS Modules, but i've faced some troubles. First, as i understand, i can't use .scss modules, that's why my idea is to convert .scss files to .css files (eg. link.scss -> link.css, main.scss -> main.css, etc.) and then connect them to React component. But i can't make webpack split my .scss files into separate .css files. I've tried different configurations, but all the time i get main.css, which concatenates all .scss files. I guess this is not the best way for me.

So, could you help me to get a correct configuration to split all .scss files to .css. Or maybe there is another way to use .scss modules in my app. Thanks in advance.

This is my webpack configuration

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
        './src/index.jsx'
    ],
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("[name].[chunkhash].css", { allChunks: true })
    ],
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015', 'react-hmre']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css!autoprefixer-loader?browsers=last 15 versions!sass")
            },
            {
                test: /\.css$/,
                loader: "style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"
            }
        ]
    }
}

And here is my output in console:

Hash: d1d3f358c1680ba4f634
Version: webpack 1.13.1
Time: 4297ms
                        Asset       Size  Chunks             Chunk Names
                    bundle.js     2.5 MB       0  [emitted]  main
main.582da1db7866d6b8684d.css  373 bytes       0  [emitted]  main
   [0] multi main 40 bytes {0} [built]
    + 324 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

You could convert the files using the node-sass cli: github.com/sass/node-sass#command-line-interface — Herku

brafdlog brafdlog · Accepted Answer · 2016-10-03T10:28:55

You can use sass with css modules together.

It doesn't work for you because you did not specify the css modules parameter for the css loader in the sass loader definition.

Below are two ways to configure sass with css modules:

With ExtractTextPlugin:

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style', '!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap!sass?sourceMap')
}

Without ExtractTextPlugin:

{
   test: /\.scss$/,
   loaders: ['style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap', 'sass?sourceMap']
}

Note that when using the ExtractTextPlugin it will create one css file. If you want a number of css output files you could define the ExtractTextPlugin multiple times (see this for reference).

Webpack split scss into separate css files

1 Answers