2 require tips for Rails 3.1 assets bundling with sprockets

In the nearly here Rails 3.1, the assets pipeline has been improved. Assets files are now stored in their own directories in app/assets and can be compiled and bundled with sprockets 2. Hence, it's now possible to use sass and CoffeeScript out of the box. You can see DHH's keynote at RailsConf 2011 for more info.

We start a project with Rails 3.1 and we want to share 2 tips about the require in assets.

Require and sass: if you use the variables or mixins, you should use the @import of sass instead of require. With require, each file is compiled separatly and then are bundled together. But if a variable is declared in one file, this declaration will not appear in the compiled CSS and so can't be used in sass files that require this file. But, with @import, files are regrouped before the compilation and so you'll avoid this problem.

Debug mode: when you are debugging Javascript, it's annoying to have only one bundled file. For example, it's hard to find the line where you want to put a breakpoint in firebug when you have several libs like jquery in this file. But Rails 3.1 has a solution for this specific problem: the debug mode. If you put :debug => true on the javascript_include_tag, each JS file will be loaded in a separate <script> tag. For our project, we use this line in our layout file:

<%= javascript_include_tag "application", :debug => Rails.env.development? %>

I hope you will try the new assets pipeline soon and you will appreciate it!

blog comments powered by Disqus