Handling scss with webpack

Question

Until now, I was using gulp to

1. Look for all scss files in a in a source path,
2. Pass these files through a gulp-sass pipe,
3. Finally, set a destination where the single compiled css file is generated.

I used the final compiled css file in my html using a link tag.

I have been unsuccessful in replicating this in webpack. I referred this loader but I can't find any option to generate a final css file in a specific location. Here's my current webpack config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/liteword.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'liteword.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
            }
        ]
    },
    stats: {
        colors: true
    },
    devtool: 'source-map',
    watch: true
};

Answer 1

Using extract-text-webpack-plugin would solve your problem. What it does is moving your generated content (in this case css) to a separate file (instead of bundling it together in your bundle.js file).

Install it via npm:

npm install --save-dev extract-text-webpack-plugin

Update your webpack config to include this:

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

Then replace your sass loaders with its customised loader, and include the plugin:

module.exports = {
    // ...
    module: {
        loaders: [
            // ...
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('public/style.css', {
            allChunks: true
        })
    ]
}