Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to automatically compile scss into css with assets pipeline in Rails 3.1?

The new rails 3.1 asset pipeline confused me a lot. In rails 3.0.x, with the sass gem, my global css file got updated when I edit .scss files. But in rails 3.1, that doesn't work anymore. It seems like I have to run a rake task to update my css files whenever I modify the .scss files. I feel like I misunderstand something about the new asset pipeline, but I don't know what it is. Can someone provide a solution or explanation to this problem? Thank you.

like image 754
jchenjc Avatar asked Sep 19 '11 07:09

jchenjc


People also ask

How do I import a SCSS file into Rails?

You can just add the import to the application. scss file so it will look like: @import "bootstrap/bootstrap.

How do you Precompile an asset?

To compile your assets locally, run the assets:precompile task locally on your app. Make sure to use the production environment so that the production version of your assets are generated. A public/assets directory will be created. Inside this directory you'll find a manifest.

How does Rails asset pipeline work?

The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages and pre-processors such as CoffeeScript, Sass, and ERB.


1 Answers

There are two possible causes of this. I am assuming that you are in development mode, and that all the gems are loaded.

1. Config

In development mode files are compiled on-demand and cached until any changes are made. You have to get the new 3.1 config options set in the right files or this might not work as expected.

Check out the Rails guides section on upgrading.

2. Extensions

The other is getting the extensions in the right order. For scss that would be file.css.scss. This tells Sprockets to parse the files as scss first, and that the have a css extension. If you had .erb on the end - file.css.scss.erb - then erb is processed first, then scss.

Upgrading apps is a bit tricky because so many things have changed. The asset pipeline guide has lots of useful information and advice.

like image 87
Richard Hulse Avatar answered Oct 23 '22 04:10

Richard Hulse