using loader for css when javascript is disabled - webpack

Question

Using style-loader and css-loader in my webpack config , below is an extract from my webpack.config.js

var wpconfig = {
    devtool: "source-map",
    entry : [
        './src/client/index.js'
    ]
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/assets/'
    },
    module:{
        loaders:[
            { test: /\.(jpg|gif)$/, loader: 'url-loader?limit=10000'},
            { test: /\.css$/, loader: 'style-loader!css-loader'   }

        ]
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

module.exports = wpconfig ;

When JS is disabled, i can see that the styles are not getting written to the <head> of the document and thus the page is rendered as plain text.

Digging around i heard about extract-text-webpack-plugin , and changing the config a little was able to bundle the *.css files to a single app.css and effectively get it loaded.

Question :

Am i right to assume that either style-loader or css-loader is failing to write the style chunks to head when JS is disabled?
Is using the extract-text-webpack-plugin a valid solution for this scenario?
Are there any other ways to load CSS in such a scenario?

P.S : Just beginning with webpack , so in case of any glaring issues in webpack.config.js , do pointout.

Jeff · Accepted Answer · 2016-05-17 11:46:05Z

3

Using ExtractTextPlugin for production is a valid solution indeed, so if you don't need any chunking, then it'll do fine. Also allows for the best minification of CSS.

I personally use ExtractText for production, and raw style loader in development.

answered May 17, 2016 at 11:46

Jeff

12.2k14 gold badges85 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

semuzaboi Over a year ago

Thanks . But what about the first bit? why doesn't style-loader not work when js is disabled?.

Jeff Over a year ago

You are correct in your assumption, style-loader uses js to inject style tags - how else would they get there? ;)

semuzaboi Over a year ago

Yup. Just had to confirm it :)

user1275105 Over a year ago

I was wondering the same about what happens when JS is disabled. This answers my question.

Collectives™ on Stack Overflow

using loader for css when javascript is disabled - webpack

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related