Styles not working in isomorphic React implementation using webpack - reactjs

Question

Server rendered html does not contain any css. Only when react runs on client side, the css gets applied. What am i doing wrong?
Webpack config server + client: (shortened for brevity)
module.exports = [
{
name: "simple-server",
entry: [path.join(__dirname, "..", "src", "server.js")],
output: {
path: path.join(__dirname, "..", "build"),
filename: "server.js",
libraryTarget: "commonjs2",
},
target: "node",
externals: [nodeExternals()],
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["css", "sass"],
},
{
test: /\.css$/,
loader: ["css"],
}
],
},
resolve: {
extensions: ["", ".js", ".jsx", ".scss"],
modulesDirectories: [ "src", "node_modules"],
},
},
{
name: "simple-client",
context: path.join(__dirname, "..", "src"),
entry: {
app: ["handlers/App", "webpack-hot-middleware/client?path=__webpack_hmr"],
},
devtool: "cheap-module-inline-source-map",
output: {
path: path.join(__dirname, "..", "build", "assets"),
filename: "[name].js",
publicPath: "assets/",
},
target: "web",
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style-loader","css-loader?sourceMap","postcss-loader","sass-loader?sourceMap"],
},
{
test: /\.css$/,
loaders: ["style-loader","css-loader?sourceMap","postcss-loader"],
}
],
},
postcss: () => [autoprefixer({ browsers: ["last 5 versions", "> 5%"] })],
resolve: {
extensions: ["", ".js", ".jsx", ".scss"],
modulesDirectories: [
"src",
"node_modules",
],
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new HtmlWebpackPlugin({
filename: "app.html",
template: "templates/main.html",
})
new webpack.HotModuleReplacementPlugin(),
],
},
];
Sample component :
import React from "react";
import "Styles.scss";
export default Component extends .... {}

Answer 1

You can tell webpack to create separate bundle for css when it creates js bundle. And use them in html head
<link rel="stylesheet" type="text/css" href="/static/style.css">
(There are many articles which suggest that it is better to have css in the head of html).
How to instruct webpack to separate css:
https://webpack.github.io/docs/stylesheets.html#separate-css-bundle
In short:
You have to install :
npm install extract-text-webpack-plugin --save
Add this plugin to plugin list:
plugins: [
new ExtractTextPlugin("style.css")
]
And in loaders:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
}
Im not sure if this works correctly with hmr (reloading css) because when I work with hmr Im not need server side rendering.
I have two webpack configs : dev and production. dev config use hmr and doesn't separate css (one bundle) and doesn't render server side. And production doesn't use hmr, have separated css and js and server side rendering.
You could check my configuration:
https://github.com/uhlryk/my-express-react-seed