Why can't I import .less files into a single .less file?

18
votes

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";

4
cssless
can you post the error you're getting? - dane
Syntax Error on line 1 localhost:8080/project/lib/style.less on line 1, column 1: * 1 @IMPORT "./css/lib"; * 2 @charset "utf-8"; - KristianB
not complete sure what the error is - i would try using lessapp and making sure your less files have at lest one style declared - dane
What i'm trying to do is to import LESS-files into a common "main" LESS-file. That way I can refer to all my variables etc etc. But it won't work!! Am i doing something wrong with the way to link to the less.js file? - KristianB
Extremely late to the party, but I was having this issue until I realized that I was using single quotes instead of double quotes- so I should have been using @import "variables" but instead was using @import 'variables'. too much JS over the years... - hartz89

4 Answers

31
votes

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.

5
votes

I had a similar problem where the imports seemed to fail silently. It turned out that my editor had saved the @import-ed files as UTF-8 with BOM, as described in this question.

For whatever reason, the LESS compiler chokes silently on @import-ed files that have a BOM, even though it barfs up an error if your root file has a BOM.

Try re-saving your @import-ed files without a BOM, and it just might work.

1
votes

I'm not exactly sure what the problem is without the error.

I would suggest using lessapp, http://incident57.com/less/, which i have found works very well and is a little easier to use. Also be wary of trying to import blank files cause it can throw an error.

I uploaded some basic code that i use to structure my files depending on the project - you can get them at https://github.com/danethurber/seamLESS. That maybe able to help and if you or anybody wants to contribute i'ld be happy for the help :)

1
votes

As you are linking to /directory it looks from root top down and in this case would not find it. So @Daniel is correct by suggesting to remove the slash.

You should link it as such:

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

This, because your starting point is within the css directory itself and then point down into that directory css/ and then pointing to the file itself.

If you would need to go first up a directory and then over and down you would do

../directory/file.less