Join two .less files into one css file

Question

When working with lesscss I would like to join two or three .less files into one super css file.

I know that you can do it using some little ruby magic, but I would like to know if there is something simple in the less engine?

score 24 · Answer 1 · edited May 23 '17 at 11:33

24

You can use import, similar to how you can in a regular CSS file.

@import "reset";
@import "config";
@import "header";
@import "forms";

Taken from this SO post. It's also mentioned in the "Importing" section of the Less Documentation.

edited May 23 '17 at 11:33

Community

answered Aug 21 '10 at 20:25

Dan Herbert

1

+1 for referencing that SO post. It's definitely worth taking a look at when using `@import` – Gerrit-K Jul 11 '13 at 07:50
if this is taken from that post, is this q not a dupe? – treyBake Jul 15 '19 at 13:06

score 12 · Answer 2 · answered Feb 12 '12 at 12:50

12

Simple solution:

Create a main.less file and open it (name it as you like)
Import your other css and less files via @import
- @import "filename.less"; for less files
- @import "filename.css"; for css files.
Compile your main.less file and just include this main.css in your site
Smile :)

answered Feb 12 '12 at 12:50

Bijan

3

This resulting css files, has import statements for each of the css files. The css is not merged, The files remain separated. – Mick Nov 17 '15 at 23:25
@Mick if you use a tool like lessc (`lessc main.less main.css`) it will result only in one file – ellockie Sep 18 '18 at 11:23