importlessless-mixins

LESS Mixins aren't available in other imported LESS files

I have this code:

@import "vars.less";

// Desktop/Laptop Section
@import "mixins-d-1.less";
@import "positioning.less";
@import "containers-d-1.less";

Inside containers-d-1.less I reference a mixin from mixins-d-1.less. However, I get an error saying that it's undefined.

I'm able to pull my variables out of vars.less, why can't I pull my mixins out of mixins-d-1.less?

Solution

  • The problem wasn't the importing at all, really.

    I made a mistake in how I was using media queries.

    Both files had the same media query since they were both for the desktop CSS (hence the "d"). However, the second one, in containers-d-1.less was OVERWRITING the first one and blowing away all my mixins! I clearly need to wrap the import block in a single media query for that section instead of redeclaring it inside each less file.