Question

I’m trying to get Guy Bedfords less plugin for RequireJS to pull some common files into each/all subsequent less files. The goal being to keep module specific less files separate, but have each pull in some common assets like variables and mixins.

So far, though, it seems like the plugin parses each less file on its own.

For example, if I simply say:

// variables.less

@red: #ff0000;


// styles.less

body {
    background-color:@red;
}


// main.js

define(['less!variables', 'less!styles'], function() {
    ...
});

variables.less and styles.less are both parsed, but styles.less won’t see @red in variables.less, and I get a javascript error saying the styles.less failed to parse.

Looking a the examples on git, it looked like separating the dependencies (forcing them to load first?) should pull them in:

// common.js

define(['less!variables'], function() {
    return {}; 
});


// main.js

define(['common', 'less!styles'], function() {
    ...
});

but this gives me the same result; a less error saying styles.less didn’t parse correctly.

I’ve tried a few “hacks” like using an @import in styles.less to pull in variables.less, but it seems that while require-less will normalize most urls it won’t normalize @imports, so now variables.less has to be referenced absolutely, which isn’t exactly what I want.

Does anyone know what I’m doing wrong here?

The goal is to load and parse less files through RequireJS in development using something that integrates well with r.js to precompile all less to css for deployment. While the require-less plugin looks great, not being able to use variables or mixins is a pretty crippling bug. Are there any other options out there to do this?

Thanks.

Answer 1

Looks like the way to load common less assets is to use an @import. It turned into a pretty quick fix to get the url normalization working (https://github.com/guybedford/require-css/pull/26).