When to use stylesheet_pack_tag instead stylesheet_link_tag with Rails 6

Question

When creating a new rails project with Rails 6, it creates an application.html.erb with stylesheet_link_tag to load CSS and javascript_pack_tag for javascript files.

Now, rails 6 also provide a stylesheet_pack_tag, so my question is, when to use it? And if we use it, do we need to add all CSS files in app/javascript folder?

What is the best practice to load css, images with rails 6 and webpacker?

Answer 1

You should use stylesheet_pack_tag if you are importing any CSS in Webpack AND if you have enabled extract_css: true for any environment in config/webpacker.yml.

Given the following directory structure:

app/
  javascript/
    packs/
      application.js
    styles/
      site.css

And the following code in application.js:

import '../styles/site.css'

You would use <%= stylesheet_pack_tag 'application' %> in your view, i.e., the name of the stylesheet matches the name of the "pack".

At this point, I also recommend renaming app/javascript to something like app/frontend. So, the key changes in config/webpacker.yml:

source_path: app/frontend
extract_css: true

app/
  frontend/
    packs/
      application.js
    styles/
      site.css