Search code examples
webpackwebpack-style-loader

using loader for css when javascript is disabled - webpack

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.

Solution

  • 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.