lesscss-engine icon indicating copy to clipboard operation
lesscss-engine copied to clipboard

Can't specify search paths

Open Akiki opened this issue 12 years ago • 2 comments

Hi,

My usage of lesscss is the next one :

  • I declare some less files, defining the css global body
  • I declare many "variables less files" (containing only variables), for different look and field
  • I generate a css file by filling my "css less file" with the desired "variables less file"

First of all : is there a best practice to do that ?

My problem is that I use the @import directive in the "css less file" to include my "variables less file" and so ... the imported file is always the same (ie the same path), so I need to change my "variables less file" (copy / paste overwrite) with the one I need each time.

I need to automate the generation.

Is there a way to specify the path (maybe in com.asual.lesscss.LessOptions ?) like it is possible with the client side version ? (http://lesscss.org/ paragraph "Configuration" : "Specify search paths for @import directives")

Thanks,

Akiki avatar Nov 19 '12 14:11 Akiki

You can solve this by creating a custom ResouceLoader implementation (see https://github.com/asual/lesscss-engine/pull/32) that would take the search path as parameter constructor parameter and then pass it to LessEngine on initialization. Alternatively if you generate all outptut files in one batch and would like to avoid re-initializing LessEngine each time, you could make your ResourceLoader implemention mutable - provide a method for changing the search path and hold on to a reference to that object. Then set a desired search path before each generation step.

rkrzewski avatar Dec 11 '12 22:12 rkrzewski

It occured to me that there's much simpler solution to your problem that will work out of the box with lesscss-engine 1.3.0. It seems to me that you simply got your includes backwards. Try this: base.less

#header {
  color: @color;
}
h2 {
  color: @color;
}

blue.less

@color: blue;
@import "base.less";

green.less

@color: green;
@import "base.less";

Then generate green.css and blue.css

rkrzewski avatar Dec 13 '12 15:12 rkrzewski