Apply css before rendering client (Isomorphic)

Question

I'm running an isomorphic app using React and webpack which all works great. One thing I'm struggling to handle though is the preloading of css before rendering components.

I've been trying to import my sass file (so webpack can sass=>css) using

require('sass/app); 

however this is still only applied once the client has been loaded.

The only way I can seem to avoid this is using a good old stylesheet linked in , which means I'll lose out on all of webpack's goodies for css.

Answer 1

Use the Webpack ExtractTextPlugin to generate your external stylesheet from the require'd styles in your app!

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "sass-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

example is adapted from the source github page