Question

I’m trying to separate my CSS files by moving variables + mix-ins to a new CSS file. I’m also using MVC 4 site hosted in Azure if that is an issue.

At the very top of my CSS file that uses the mix-ins, I have:

@import "theme.less.css"; 

However, it doesn’t load it. The error I get is:

variable @defaultColour is undefined on line 166 in file 'styles.less.css'

It is clear that theme.less.css is not being referenced. The documentation for dotless does not mentions the @import statement.

Answer 1

There is an option to treat all imports as less files – otherwise it assumes that because it ends in .css it is imported directly, e.g. not parsed, just shoved in.

When you run the compiler exe without arguments this gives all the options

-a --import-all-less - treats every import as less even if ending in .css

and in the web config

<dotless importAllFilesAsLess="true">

or if you are using your own handler, set the option on the config object.

It is a feature request to handle .less.css files as .less instead of .css and one I’ve put off a while in case someone is compiling less to .less.css, but I think its something we should add