Recompile the parent LESS file in Rails 3.2

Question

I'm using the "less-rails" gem to get less integrated into my rails app.

In my "applications.css.less" file, I'm importing other LESS files into it. When I make a change to any of the imported files I need to re-save the "application.css.less" file in order for it to pick up the change.

How can I have the "applications.css.less" file recompile automatically when one of the imported files are changed?

Answer 1

My other less files were not going through the asset pipline. Once I fixed this and imported them into my "application.css.less" file, "application.css.less" began recompiling automatically when the other files changed.

Answer 2

found a solution mentioned here: https://github.com/metaskills/less-rails/issues/80

gem 'less-rails', github: 'dv/less-rails', branch: 'fix-import-dependencies'

wont work with livereload tho so im back to cmd + r

Answer 3

This is an old problem and unfortunately there is no way to do this with native way. The LESS compiler just watches modified files. So, if you are using a file with imports, this file needs modified and recompiled.

In development enviroment (with javascript) you can solve this issue putting this to clear cache:

  <link rel="stylesheet/less" type="text/css" href="/css/style.less"/>
  <script src="/js/less-1.1.5.min.js" type="text/javascript"></script>
  <script>
    less = {env:'development'};
    function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'
      if (!window.localStorage || !less || less.env !== 'development') {
        return;
      }
      var host = window.location.host;
      var protocol = window.location.protocol;
      var keyPrefix = protocol + '//' + host + pathToCss;

      for (var key in window.localStorage) {
        if (key.indexOf(keyPrefix) === 0) {
          delete window.localStorage[key];
        }
      }
    }
    window.onload=destroyLessCache('/css/');
  </script>

Reference: https://github.com/cloudhead/less.js/issues/47