2

I'm using Dotless on my ASP.NET MVC project, I have a main less file that just imports some other files.

e.g.

main.less contains:

@import "lib/utils" @import "lib/account" @import "lib/settings"

The idea is to have a single css file in the entire application.

When I save the main.less file the dotless compiler automatically generates the main.css file, however when I save one of the other files (like utils.less) it just generates the utils.css file, therefore if I make a change to any of the .less files I have to open the main.less and save it to trigger the compiler and get the .css file

I was wondering if there's a way to automatically compile the main less file no matter which .less file I save.

Thanks

willvv
  • 8,439
  • 16
  • 66
  • 101

3 Answers3

3

I use Simpless to do my LESS compiling, you give it your main .less file and it will watch that and any child .less files and compile in the background for you.

Chao
  • 3,033
  • 3
  • 30
  • 36
  • I'll check it out, thanks for the link. Will it also compress the generated css? – willvv Mar 13 '12 at 16:06
  • Yep, compression is built in as standard and allows a flag in the less file to disable it for debugging. – Chao Mar 13 '12 at 16:42
0

Winless does exactly this - its a compiler similar to simpless but I've found it more reliable. http://winless.org/ -

user1010892
  • 1,179
  • 3
  • 14
  • 25
0

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 js) you can put 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

Shankar Cabus
  • 9,302
  • 7
  • 33
  • 43
  • I was looking more for a solution that would prevent me from changing things when switching from development to production. I ended up importing the .less file in development and the .css file in production. When the .less file is imported directly (instead of the .css) the compiler automatically re-generates it. This is possible only in development. The only thing missing is that I have to manually generate the .css when I deploy. – willvv Mar 11 '12 at 16:47
  • Yes .. You must copy the generated css and paste it into another file (preferably compressed). As you can see in link of my answer, there is still no definitive solution to this. I too suffer with this problem = / – Shankar Cabus Mar 11 '12 at 17:45
  • What do you mean by copying to another file? The dotless compiler automatically generates a compressed .css file for me, I just have to trigger the compiler manually before deploying. – willvv Mar 11 '12 at 22:19
  • I'm not using dotless, but the lesscss (http://lesscss.org/) has two ways to compile .less file: by javascript or server compiler. I always have problems with server compiler, so I prefer use javascript compiler for development, that generates the css and puts it into the in – Shankar Cabus Mar 12 '12 at 14:11