Tarun Dugar Tarun Dugar - 1 month ago 16
Sass (Sass) Question

Handling scss with webpack

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

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
        })
    ]
}
Comments