19

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

Community
  • 1
  • 1
KristianB
  • 1,403
  • 3
  • 25
  • 46
  • can you post the error you're getting? – dane Mar 29 '11 at 15:15
  • Syntax Error on line 1 http://localhost:8080/project/lib/style.less on line 1, column 1: * 1 @IMPORT "./css/lib"; * 2 @charset "utf-8"; – KristianB Mar 29 '11 at 15:28
  • 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 Mar 29 '11 at 15:36
  • 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 Mar 29 '11 at 16:25
  • 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 Apr 30 '15 at 17:52

4 Answers4

32

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.

Daniel
  • 1,052
  • 1
  • 12
  • 23
5

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.

Community
  • 1
  • 1
Chris Jaynes
  • 2,868
  • 30
  • 29
1

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
Marlyse Comte
  • 11
  • 2
1

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 :)

dane
  • 398
  • 1
  • 2
  • 7
  • Let me get this seamLESS right... You link to a stand-alone .css file in the HTML file. And where exactly do you use the .less files? – KristianB Mar 29 '11 at 15:37
  • the less files are in the less folder - i'm using less to compile all the other files and output a css file – dane Mar 29 '11 at 15:39
  • Aha - it seems I can't run that less.app without a mac -.-' But I thought putting `` in the end of the `` tag compiles it for me? – KristianB Mar 29 '11 at 15:41
  • you can do that as well - i just prefer to compile it so the browser doesn't have to – dane Mar 29 '11 at 15:42
  • make sure to put the less file before the js – dane Mar 29 '11 at 15:43
  • But right now I have linked to my style.less like this ``. And after that linked to the less.js script... It still doesn't enable me to `@import` anything... – KristianB Mar 29 '11 at 15:44