1

I have a grunt task set up to watch changes in my LESS stylesheets and convert to CSS after saving. For some reason even though the stylesheets are pulled together properly, my watch task fails whenever I try to reference a style from an import to use as a mixin.

For example

main.less

@import "base";
@import "template";

.block {
   .col-3;
   // something here
}

base.less 

body {
    // something here
}

.col-3 {
   // something here
}

If I don't include .col-3 as a mixin for block, main.less compiles properly with all the values from the imported base and template stylesheets. When I try to reference .col-3 or any other class from the other sheets into main.less however, I receive the following error:

NameError: .col-3 is undefined in static/css/main.less on line 91, column 2:

I can still use .col-3 as a mixin within base.less, the stylesheet it was created in. Compiling only fails when I try to bring it into another sheet.

user2989731
  • 1,299
  • 3
  • 17
  • 33
  • Honestly I can't imagine any reason why it would not work (assuming this minimal example is the actual code and everything else is the same in your build environment - e.g. there's no some other `base.less` flying around w/o `.col-3` defined). – seven-phases-max Aug 23 '14 at 08:39
  • Here in 2018, I'm having the same issue! See my question here: https://stackoverflow.com/questions/53233211/less-mixins-arent-available-in-other-imported-less-files – Reverend Bubbles Nov 13 '18 at 18:10

0 Answers0