CODEWITHSUNDEEP
javascriptsasswebpack-4
Pierre Smith
Pierre Smith

Reputation: 465

Is there a way to build scss files into css with webpack 4

I'm just trying out Webpack 4 and I was wondering if it had a built-in way to manage Scss files since ExtractTextPlugin doesn't work.

Upvotes: 1

Views: 1911

Answers (1)

Carloluis
Carloluis

Reputation: 4320

In Webpack 4 you also need to use extract-text-webpack-plugin in order to extract text from bundles. The problem is that stable version isn't compatible with the new plugin system. The team is working on it, but in the meantime you need to install the v4.0.0-beta.0 version.

yarn add extract-text-webpack-plugin@next --dev

You can also check this webpack-demo on GitHub with more configs.

The use on webpack.config.js script remains the same:

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

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                camelCase: 'dashes',
                                minimize: true
                            }
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].[chunkhash].css')
    ]
}

Upvotes: 6

Related Questions