CODEWITHSUNDEEP
csssasswebpackwebpack-2extracttextwebpackplugin
me_digvijay
me_digvijay

Reputation: 5502

Unable to extract CSS from scss with ExtractTextPlugin webpack

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"
     })
 }

Upvotes: 1

Views: 589

Answers (3)

Nic Barker
Nic Barker

Reputation: 1000

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.

Upvotes: 1

NicoD
NicoD

Reputation: 1189

You have to install sass-loader

npm install --save-dev sass-loader

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

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,

Upvotes: 1

DevNebulae
DevNebulae

Reputation: 4916

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.

Upvotes: 1

Related Questions