Sass loader and webpack 4

Question

How to use sass loader with webpack 4? I read a lot about this and most sites recomended to use ExtractTextPlugin, but ExtractTextPlugin doesn't work with webpack 4.

I wrote following webpack.config.js:

const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');


module.exports = {
    module: {
        rules: [
            {
             test: /\.scss$/,
             use: [{
                 loader: "style-loader"
             }, {
                 loader: "css-loader"
             }, {
                 loader: "sass-loader"
             }]
            }
        ]
    },
    plugins: [
        new ClosureCompilerPlugin({
            compiler: {
                language_in: 'ECMASCRIPT6',
                language_out: 'ECMASCRIPT3',
                compilation_level: 'ADVANCED'
            },
            concurrency: 3,
        })
    ]
};

Output .js file works well, but my .scss didn't compile to css. I'm tried to add entry points:

entry: {
    stylesheet: path.resolve('src', 'scss/styles.scss'),
    main: path.resolve('src', 'index.js')
}

and after this my styles.scss compiles to stylesheet.js, but i not to .css.

Fastening

Answer 1

webpack 4 is not yet capable of outputting standalone *.css file on its own. To get a separate *.css file, you need to use the extract-text-webpack-plugin to pull out all the CSS into its own entry chunk. This is a good tutorial.

Yokoyama

It hepls, but i am still can't get output main.css file. I'm trying to add stylesheet: path.resolve('src', 'scss/styles.scss'), to my entry in config file and i recive main.js, main.css and stylesheet.js(why?). I'm trying to require my styles inside index.js, but it always error(can't find module). – Fastening

@MaximZemskov try removing the css entry from your webpack config to see if it helps. – Yokoyama

That extract-text-webpack-plugin doesn't work well with webpack 4. Instead, you should use this one: mini-css-extract-plugin – Tali

Answer 2

You can use mini-css-extract-plugin.

https://github.com/webpack-contrib/mini-css-extract-plugin

I used the same plugin for extracting SASS to CSS using webpack 4 and it's working like a charm.

Anthropophagi

I tested the beta version of extract-text-webpack-plugin for webpack 4 and it is working fine as well. github.com/webpack-contrib/extract-text-webpack-plugin/releases/… – Anthropophagi

Yes, but it's beta. What is more - the creators of extract-text-webpack-plugin suggest users to use the mini-css-extract-plugin – Crewel

Answer 3

You can use [email protected] with Webpack 4, if that fits your requirements.

Version 11.0.0 of sass-loader introduced this minimum webpack 5 supported version breaking change. You can see a changelog at https://openbase.com/js/sass-loader/versions

Airspace

openbase is now down: this link is broken :( – Ancipital

Answer 4

The beta works well with [email protected]

npm install extract-text-webpack-plugin@next

Seger