Search code examples
ruby-on-railswebpacker

Rails webpacker.yml, extract_css option


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?


Solution

  • 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.