Propshaft - Serving your own SASS files

If you write your CSS yourself (as opposed to writing CSS → or using CSS from a library →), you can place all the files in the folder app/assets/stylesheets, but you must make sure that the SASS gem installed and configured.

In order for your SASS files to be picked up, make sure you install the dartsass-rails gem:

./bin/bundle add dartsass-rails
./bin/rails dartsass:install

This generates an empty file app/assets/stylesheets/application.scss. It is the entrypoint to your other SASS files. You can write your own code directly into the file, or use @use to import additional files.

It also updates bin/dev and Procfile.dev and includes the SASS file watcher process, which automatically recompiles your files whenever they change.

If you upgraded from a previous version of Rails, make sure that the file app/layouts/application.html.erb contains the line

<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>

inside the <head> tag. This makes sure that your styles from app/assets/stylesheets/application.scss are included in the page.

How to use in development

Make sure to run your application with bin/dev. This runs both the Rails application server and the SASS file watcher. The watcher automatically compiles changes to your SASS files and serves them during development.

If you need to run the SASS compiler manually, you can run rails dartsass:build.

How to use in production

The dartsass gem automatically adds the SASS compilation step to the precompilation. The compiled CSS files are then placed in public/assets and served automatically.