DEV env with webpack-dev-server not emitting css

[alphabt]

After upgrading to 4.0.0.rc.2, my app now doesn't emit css in dev env with webpack-dev-server running so my pages are missing all styling. I found #1625 to be causing this behavior.

I changed the default extract_css to true in webpacker.yml and now it works, but I'm not quite sure if it's recommended to emit css in dev running webpack-dev-server?

default: &default
  extract_css: true # default to false

Otherwise if we don't emit css, I assumed it will do CSSinJS, but then I'm not sure why my site isn't loading any css.

Here's my application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

[pratik0809]

+1

My styles seem to be working after enabling extract_css but there's a slight flicker on every page load where I first see the page unstyled and then the styles get applied. Didn't have this issue on v 3.5.5. Seems to be both when using webpack dev server and compiling the assets before hand.

[pratik0809]

Nevermind, I only had extract_css: true under production, once I added it under development in webpacker.yml I no longer see the flicker. Which now confuses me how I got styles showing up in the first place.

[gauravtiwari]

If you don't extract css it's included in the JS bundle that's why you will notice a flicker since JS takes a while. With extract css, it will be loaded as normal css on the page.

[majkelcc]

Should extract_css option work together with hmr? It doesn't seem to, css files are not created. Is there any other way to avoid the flicker when using hmr?

[jakeNiemiec]

extract_css and hmr should be mutually exclusive. mini-css-extract-plugin, controlled by extract_css, states:

This plugin should be used only on production builds without style-loader in the loaders chain, especially if you want to have HMR in development.

I also don't think that hmr will work with turbolinks.

[rossta]

I believe the original issue has been resolved? Closing due to inactivity and for the fact that the èxtract_css option will be removed in Webpacker 6 and CSS will be extracted by default.