Using with Rails 3.1

[marioestrada]

There's not much documentation out there about working with the asset pipeline in Rails 3.1

Do you have any guidance on how to use the Less.js as a css_compressor in RoR 3.1?

I've already included it in the gemfile and have run bundle update less-js

[thisduck]

Rails 3.1 uses Tilt for processing sass and coffeescript. Tilt is currently at 1.3.2 and will include less-js support in 1.4. For now I've forked it and added less-js.

In your Gemfile:

gem 'tilt', :git => 'git://github.com/thisduck/tilt.git'
gem 'less-js'

and then bundle update

Then in your assets/stylesheets name files as 'file.css.less', if you're using require_tree they will be processed properly.

Let me know if you face any issues. I should probably blog about this somewhere.

[thisduck]

Oh, btw if you want to compress your css:

Gemfile:

gem 'yui-compressor'

config/environments/production.rb:

config.assets.css_compressor = :yui

This will compress the css.

[marioestrada]

Thanks this worked great. On the CSS minification I know that the less.js command line tool can minify files, would it be possible to add support for minification through the less-js gem?

I have no problem using yui but this would definitely be a nice feature.

Thanks again for your help!

[soychicka]

It seems that bundler doesn't fallback from the git to http(s) protocol if there's a timeout (e.g., in-house web proxy), so I had to change

gem 'tilt', :git => 'git://github.com/thisduck/tilt.git'
to
gem 'tilt', :git => 'https://github.com/thisduck/tilt.git'

in case anyone has trouble installing/updating their bundle using the code above.

[kbaum]

I tried following these instructions for a rails 3.1 project and I ended up with this error:

body:before {
font-weight: bold;
content: "\000a ExecJS::ProgramError: ReferenceError: Can't find variable: loadStyleSheet\000a (in \002f Users\002f karl\002f workspace\002f viewthespace\002f app\002f assets\002f stylesheets\002f screen.css.less)";
}

Any ideas?

thx!

[SpoBo]

@kbaum I have the same issue. It works with simple .css.less files but when I want to import another less file it tells me 'loadStyleSheet is not defined'.

application.css contains the following line: *= bootstrap/bootstrap.less
bootstrap.less does a bunch of @require statements. each calling to other files in the bootstrap directory.

Server log:

Started GET "/assets/application.css" for 127.0.0.1 at 2011-08-31 16:17:07 +0200
Compiled application.css (4ms) (pid 41852)
Error compiling asset application.css:
ExecJS::ProgramError: ReferenceError: loadStyleSheet is not defined
(in /Users/spobo/dev/iep/app/assets/stylesheets/bootstrap/bootstrap.less)
Served asset /application.css - 500 Internal Server Error

This is the output returned in my application.css:

      html {
        padding: 18px 36px;
      }

      head {
        display: block;
      }

      body {
        margin: 0;
        padding: 0;
      }

      body > * {
        display: none !important;
      }

      head:after, body:before, body:after {
        display: block !important;
      }

      head:after {
        font-family: sans-serif;
        font-size: large;
        font-weight: bold;
        content: "Error compiling CSS asset";
      }

      body:before, body:after {
        font-family: monospace;
        white-space: pre-wrap;
      }

      body:before {
        font-weight: bold;
        content: "\000a ExecJS::ProgramError: ReferenceError: loadStyleSheet is not defined\000a   (in \002f Users\002f spobo\002f dev\002f iep\002f app\002f assets\002f stylesheets\002f bootstrap\002f bootstrap.less)";
      }

      body:after {
        content: "\000a   \002f Users\002f spobo\002f .rvm\002f gems\002f ruby-1.9.2-p290@iep\002f gems\002f execjs-1.2.4\002f lib\002f execjs\002f external_runtime.rb:65:in `extract_result'";
      }

I'm going to switch to the regular less.js method but this seems like a bug to me :)

[thisduck]

The asset pipeline pulls in the processed less file. So when you include bootstrap.less in your application.css file, it only pulls in the parts that compile to proper css. And then it loads your own css files, so your css files don't see the variables and mixins created by the bootstrap file (or files that the bootstrap file imports). I haven't had time to look into how we can get tilt/sprockets to honour the less imports.

However, a (temporary?) solution to this would be to pull in the import files directly into your less file:

<%= File.read "#{Rails.root}/vendor/assets/stylesheets/bootstrap.less" %>

And you'd have to rename your less file to end with "css.less.erb" so that the ruby is executed.

Not sure if there is a better way of doing this yet.

[kbaum]

Until we can get rails to handle less like sass, i think the best option is to go with the less osx app.

http://incident57.com/less/

I think you just let the app watch your less files and it generates the css which you check in to the repo.

thx!

[SpoBo]

@thisduck: worked like a charm!!

For those wondering:
I'm using the bootstrap 'framework' from twitter and this is what my stylesheets/bootstrap.css.less.erb file looks like:

/*!

• Bootstrap v1.1.1
  *
• Copyright 2011 Twitter, Inc
• Licensed under the Apache License v2.0
• http://www.apache.org/licenses/LICENSE-2.0
  *
• Designed and built with all the love in the world @twitter by @mdo and @fat.
• Date: @Date
  */

/* CSS Reset */
<%= File.read "#{Rails.root}/app/assets/stylesheets/bootstrap/reset.less" %>

/* Core */
<%= File.read "#{Rails.root}/app/assets/stylesheets/bootstrap/preboot.less" %>
<%= File.read "#{Rails.root}/app/assets/stylesheets/bootstrap/scaffolding.less" %>

/* Styled patterns and elements */
<%= File.read "#{Rails.root}/app/assets/stylesheets/bootstrap/type.less" %>
<%= File.read "#{Rails.root}/app/assets/stylesheets/bootstrap/forms.less" %>
<%= File.read "#{Rails.root}/app/assets/stylesheets/bootstrap/tables.less" %>
<%= File.read "#{Rails.root}/app/assets/stylesheets/bootstrap/patterns.less" %>

This gets picked up by the asset pipeline. Also, make sure the bootstrap folder doesn't get picked up by default by the asset pipeline and everything will 'load' in order. Thx for the tip.