Reference existing scss assets after installing `cssbundling-rails` on existing rails project

user_1337408 0
Viewed 518

After installing the cssbundling-rails gem I'm having trouble referencing my existing .scss files that live under app/assets/stylesheets/.

When you install the cssbundling-rails gem it:

  1. removes your application.css (https://github.com/rails/cssbundling-rails/blob/main/lib/install/install.rb#L13) which contains all the references ( *= require_tree . *= require_self) to then be used in the asset pipeline.
  2. Replaces it with application.tailwind.css (I ran the tailwind install)
  3. Creates a new folder called builds that contains application.css with all tailwind css I use.

The result of 3 is then used <%= stylesheet_link_tag 'application' %> tag in the application layout as normal.

To reproduce:

  1. Create a new rails Rails 6.1.4.1 app
  2. rails g scaffold post
  3. add some styles in post.scss and verify styles are applied
  4. install cssbundling-rails
  5. Install tailwind option
  6. restart server using ./bin/dev and you'll see the styles not getting picked up.

A couple things I've tried.

  • Referencing the stylesheet directly in assets/config/manifest.js
  • Adding an import rule in the application.tailwind.css to reference existing scss files.
  • Adding the css directly to application.tailwind.css file. This does work and the styles are correctly applied. I'm sure this is not the intended pattern.

Where and how can I reference exiting .scss under app/assets/stylesheets to be used in the new bundling/build process?

Admittedly, I think this stems from not fully understanding sprockets, asset pipeline, and bundling/build processes. I feel like I'm missing something obvious here.

asset-pipeline ruby-on-rails-6 sprockets ruby-on-rails
2 Answers

Just to expand on @computer_smile's answer.

*= require posts is a Sprockets directive.

So what's happening here is:

When css-bundling is installed, the command ./bin/dev will start a foreman process, based on what you've setup in your local Procfile.dev.

Per default, that includes a line like css: yarn build:css --watch.

The yarn build:css command is setup in your package.json file.

When you have css-bundling setup to use tailwind, that yarn build:css will run tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css

The Sprockets directive = require posts will be ignored by yarn. (It is treated like a css comment.)

At this point, you can check that your build (which yarn produced) in assets/builds/application.css has all your tailwind styles, and your Sprockets directive (in form of a css comment) = require posts.

Only now, when you are using Sprockets, will this directive be turned into actual css, when you start your rails server (which you should be able to confirm in your browser).

user_7978700

For now in application.tailwind.css I'm using the standard require to include these styles. This is currently working as expected in dev environment.

/*
 *= require posts
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
*/
user_13374080
Related