Question

I have this structure of my files:

lib/css/... contains my styles divided into single .less files for each kind of area.

lib/style.less is the file I want to gather my sub-style files into – and the file I want to be linked into the HTML.

When I type in (into style.less):

@import url("/css/StyleToImport.less");

or

@import "/css/StyleToImport.less";

… I get a syntax error.

Is it really impossible to combine .less files into a single file?

It could be really handy to have 1 single file to contain all variables for colors, dimensions etc.

But as it is now, I have to use <link ...> tags in HTML to every single file – which is not so handy.

P.S. I have read Join two .less files into one css file

and I have read this:

Importing

Importing works pretty much
as expected. You can import a .less
file, and all the variables in it will
be available. If the file is a .less,
the extension is optional:

@import “library”;

@import “typo.css”;

Answer 1

I just tried this on my local environment, putting vars into vars.less and mixins into conf.less. The file structure similar to yours, with the base .less file a level below the folder containing all the ‘includes’.

So I had css folder which had my main.less file and then css/less/vars.less | conf.less

To import both of those:

@import "less/vars.less";
@import "less/conf.less";

My only answer is to remove the first / in your @import statement. I had similar problems when trying to import a google font into my .less file.

Worth a shot at least, because using the same structure as yours mine is working.