Unable to extract CSS from scss with ExtractTextPlugin webpack

Question

I have following configurations in my webpack.config.js and package.json respectively:

var extractSCSS = new ExtractTextPlugin({filename: '[name].css', disable: false, allChunks: true});


module: {
    loaders: [
        {
            test: /\.jsx?$/,
            include: SRC_DIR,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ["react", "es2015", "stage-2"]
            }
        },
        {
            test: /\.scss$/i,
            include: SRC_DIR,
            exclude: /(node_modules)/,
            loader: extractSCSS.extract(['css','sass'])
        }
    ]
},
plugins: [
    extractSCSS
]

and

"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta",
"style-loader": "^0.13.1",
"webpack": "^2.2.0",

But I am not able to generate the css files. Is there something I am missing here?

EDIT I updated the files as below:

    "css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.5",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",

and

{
     test: /\.css$/,
     exclude: /(node_modules)/,
     loader: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader",
        publicPath: "/dist"
     })
 }

NicoD · Answer 1 · 2017-01-25T08:47:26.520

1

You have to install sass-loader

npm install --save-dev sass-loader

Note that with Webpack2 you should/have to update the configuration file :

It is not possible anymore to omit the -loader extension when referencing loaders (Automatic -loader)
module.loaders is now module.rules ( webpack 2 migration guide )
chaining loaders is only supported using the legacy option module.loaders
in V2 rule.use entry specifies a loader to be used. (rule.use)

Here is extracts of my working config :

const extractCss = new ExtractTextPlugin('app.bundle.css');

add this rules :

{
    test: /\.scss$/,
    loader: extractCss.extract([
        { loader: 'css-loader', query: { sourceMaps: true }},
        { loader: 'sass-loader', query: { sourceMaps: true }}
    ])
},

and the plugin :

plugins: [
    extractCss,

edited Jan 25 '17 at 08:47

answered Jan 24 '17 at 19:16

NicoD

1,179
8
19

Ok, So I installed sass-loader, updated the webpack.config file but still css file is not being generated. Also when I tried installing `extract-text-webpack-plugin@beta` it says unmet peer dependency for node-sass@^3.4.0 | | 4.0.0, but I have installed node-sass. – me_digvijay Jan 25 '17 at 06:20
Your updated config target css files ( `/\.css$/` ) instead of `.scss` and there is no sass loader... – NicoD Jan 25 '17 at 12:40

score 1 · Answer 2 · answered Jan 25 '17 at 08:15

I have ExtractTextPlugin set up and it works, but it looks totally different from the configuration that you have. This is my configuration

module: {
    rules: [
        ...
        {
            loader: ExtractTextPlugin.extract({
                fallbackLoader: "style-loader",
                loader: [
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "postcss-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }),
            test: /\.s(a|c)ss$/
        }
        ...
},
plugins: [
    ...
    new ExtractTextPlugin({
        allChunks: true,
        filename: "style.[contenthash].css"
    })
    ...
]

How it works is that the loaders get called from the back to the front. So first is the sass-loader, then the postcss-loader, etc. The fallbackLoader option is used when there is no CSS which can be extracted.

Last but not least, I want to add that I don't use ExtractTextPlugin in development, since it can result in longer build times.

Edit

I forgot to include the plugins part of my configuration. And just to clarify, the dots mean that there it is a piece of my configuration. All content relevant to the question is provided.

score 1 · Answer 3 · answered Oct 03 '17 at 23:18

Not sure if this will help, but for me moving over from Browserify I had some grief with this same issue.

I didn't realise in order for the ExtractTextPlugin to produce any css, I had to include the scss in the javascript somewhere (even though it's extracting to app.bundle.css or similar) otherwise it will silently produce no output.

application.js

require('../scss/container.scss')

or

import css from '../scss/container.scss'

will result in injected <style> tags in the header in development, and an extracted app.bundle.css file in production.

Unable to extract CSS from scss with ExtractTextPlugin webpack

3 Answers3