Extract css out of App container

[l4u]

Should we extract the css for html, body, button from /client/containers/App/style.css to another global stylesheet?

[tj]

probably, I'm not sure what the convention is there but that would make sense to me!

[gpbl]

I usually put such css declarations into a generic html.css file, that I import from the entry file. In your case, since the entry file is called app/index.jsx, I'd call it index.css.

[c0b41]

maybe use this https://github.com/webpack/extract-text-webpack-plugin

[wieringen]

Would this also fix the fouc that is visible sometimes when loading the index?

[mikaa123]

👍 for @ayhankuru proposition. I used Extract Text Plugin for my project and it works great.

What I like about it is that we don't have to change the current file architecture (css files can remain in component folders), and it fixes the fouc.

[wieringen]

@mikaa123 Can you share the code of your solution? I'm really interested :)

[mikaa123]

@wieringen sure.

There are two parts:

• Use Extract Text Plugin in your webpack.config.js:

module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

This tells webpack to create a styles.css file with all the css inside.

Reference it from index.html. Use the regular link tag.

Do we want to do this for the boilerplate? If so, I'd happily make a PR.

[wieringen]

Thanks I will try it out now! :)

[wieringen]

@mikaa123 Wouldn't it be better to only use your solution for the App/style.css and the current solution for all the other css files?

[mikaa123]

@wieringen no need to use Extract Text Plugin if we only want to reference App/style.css. As @gpbl said we can create the css file and simply reference it from the index. However, it won't fix the FOUC.

The FOUC comes from the CSS being bundled in the JS. Our components get added to the DOM before the CSS exists and boom! Flash of Unstyled Content. Hoisting the CSS fixes it though. I'm sure there are other solutions too.

[gpbl]

I use the ExtractTextPlugin only when building for production. On development, a static .css breaks the css hot reload. Or, at least, I could't find a way to remove the included .css after the first hot reload...