Table: RailsNotes
User: dreamable
Created at: 2021-08-25 06:22:13 UTC
Updated at: 2021-08-25 06:22:13 UTC
Reference:(Table ID 3, Record ID 50)

标题 :
Rails Webpacker & stylesheets
笔记 :
  1. I have an issue that select2 css is not included in production, although OK in development.
  2. Further, I found all css included in app/javascripts/packs/application.js not working
  3. I do add stylesheets_pack_tag in views/layout/application.html, but no effect, no <link> generated. why? Seems to be a Rails6.1.3/webpacker5.0 bug
  4. In development, according to the extract_css=false setting in config/webpacker.yml, so all css are embed in the HTML. In production, the css is extracted, put in a separated file public/packs/css/applicationxxx.css. However, it's not included in html, so not work.
  5. One solution is to update extract_css=false for production as well, this leads to embed css in HTML, which works but is ugly.
  6. I workaround the problem by moving all css from packs to assets/stylesheets/application.scss
  7. To import css in node_modules, remember to use @import 'select2/dist/css/select2.min'; instead of @import 'select2/dist/css/select2.min.css';. The later cases works in development, but the file is empty in production. I guess because Rails production doesn't know the local directory of node_modules. The former case works, as the css is copied to application.css, instead of a separated file.
Tag: