Has anyone else experienced:
github.com/Hashnode/mern-starter/issues/241
I can't get the isomorphic styles to work. :/ I guess it must be something to do with webpack builds server-side, but I would have thought this would work?!
Hi James,
To make hot reloading of CSS work, CSS is not being extracted in the development build.
During development, after all of the scripts get loaded, CSS is loaded as BLOBs. That's why you are not able to get the styles working with JavaScript disabled.
For production, though, the CSS is extracted and a .css file is created, which is used in the HTML template. So you wouldn't face this problem in production.
You're correct in identifying that it has something to do with webpack builds. For the above differences have a look at webpack.config.prod.js and webpack.config.dev.js
./webpack.config.prod.js
...
module: {
loaders: [
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'),
...
./webpack.config.dev.js
...
module: {
loaders: [
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
...
Sai Kishore Komanduri
Engineering an eGovernance Product | Hashnode Alumnus | I love pixel art
Sai Kishore Komanduri
Engineering an eGovernance Product | Hashnode Alumnus | I love pixel art
@james_sherry @somu has identified the bug, and we have pushed a fix. Here is the diff. That should fix it.