Rails webpacker.yml, extract_css option

Question

According to rails/webpacker documentation, extract_css is default to true in production environment and false in development. From what I observed:

• With extract_css true, webpacker will emit a css file from each stylesheet_pack_tag in application.html.erb.

• And, with extract_css false, stylesheet_pack_tag return nil & stylesheet that gets imported in js files will get extracted and bundle into blobs and send to browser. Hence, link tags to blob url exist.

So, I assume that using extract_css true yield the same result as using inline styles in header since styles get downloaded to browser with the website document file. If what I understand is true then setting extract_css to true on production should be ok.

Is what I understand about extract_css option correct?

Answer 1

You mostly correct, you can read more about extract_css in css.md or v4-upgrade.md

With extract_css: true, webpacker will emit a single css <link rel="stylesheet"... from each stylesheet_pack_tag.

With extract_css: false, stylesheet_pack_tag return nil & stylesheet that gets imported in js files will get extracted and bundle into blobs and injected into as an inline .

In the end extract_css: false is the one that yields the same result as using inline styles.

Answer 2

I don't have anything to add other than "extract_css" in webpacker.yml has been a source of confusion for me as well. When it is "extract_css: false" in development and production, a stylesheet IS included in the document head (shouldn't this be "extract_css: true"?). And when I use "extract_css: true", styles are not included in the document.