how to get webpacker to load css if extract_css is false

Question

I have the following pack file:

// app/javascript/packs/styles.js 
import 'bootstrap/dist/css/bootstrap'

Unless I set extract_css: true in config/webpack.yml I do not see how to get these styles to load.

If I set extract_css: true and include <%= stylesheet_pack_tag 'styles' %> in the layout everything seems to work.

But then what is the point of extract_css: false why would you ever NOT want this? Because its the default webpacker configuration I feel as if I am missing something important.

rossta · Accepted Answer · 2019-11-24 03:44:54Z

3

With extract_css: false, the styles are provided by the webpack js runtime as blob urls and injected into the document <head> inline (assuming you have a corresponding javascript_pack_tag).

One use case for this approach in development is to better support hot module reloading for CSS.

edited Nov 24, 2019 at 3:44

answered Nov 23, 2019 at 22:25

rossta

11.5k1 gold badge45 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mitch VanDuyn Over a year ago

thank you the clue here was that you have to have the corresponding javascript_pack_tag. so If I understand you have both a javascript_pack_tag AND a stylesheet_pack_tag, BUT the stylesheet_pack_tag is ignored by the system in development.

rossta Over a year ago

Yep and you can verify the stylesheet_pack_tag behavior here: github.com/rails/webpacker/blob/…

arieljuod · Accepted Answer · 2019-11-23 17:35:07Z

0

I'm not 100% sure, but I think if you extract the css, webpack will generate that standalone css file so you can link it. If you don't extract it, the CSS is bundled insde the js file and webpack will process it when the page loads and inserts the CSS in a style tag in the head tag of the document.

To extract the CSS from the js file it uses the mini-css-extract plugin.

https://webpack.js.org/guides/asset-management/#loading-css

In some cases you may want to keep the css on the bundle if you want to have all the js and css with only one request.

answered Nov 23, 2019 at 17:35

arieljuod

15.9k2 gold badges27 silver badges37 bronze badges

Collectives™ on Stack Overflow

how to get webpacker to load css if extract_css is false

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related