Join Two .Less Files into One CSS File

Compiling all less files into one stylesheet?

You have to create a master less file that imports the subfiles. The master file would import the subfiles with:

@import "myfile1.less";
@import "myfile2.less";

Into the compiler, you just pass the master less file.

Hope this helps // ph

create different css files from same less files

You can indeed produce multiple CSS outputs from a Less file, provided you use 'control' Less files.

E.g., here is the main stylesheet we're using for a site:

/* main-stylesheet.less */
@maincolor: #ff0000;
@secondarycolor: #00ff00;

body {
  color: @maincolor;
  background-color: @secondarycolor;
}

Now, we want to produce a secondary stylesheet (to output 'customer.default.css', or 'customer.css' as you prefer) - we import the main Less and override its variables:

/* secondary-stylesheet.less */
@import "main-stylesheet";

// Override variables from the 'main' stylesheet.
@maincolor: #0000ff;

Note that we do not define any rules or set any styles here, only override the variables.

Here are the output CSS files:

/* main */
body {
  color: #ff0000;
  background-color: #00ff00;
}

/* secondary */
body {
  color: #0000ff;
  background-color: #00ff00;
}

This is possible because Less uses lazy loading.

Be sure that the file watcher setting 'Track only root files' is disabled; otherwise the main stylesheet in our example would not produce any output css.

(Also, I would separate the two variable declaration blocks into their own Less files - perhaps as theme-variables-default.less and theme-variables-override-a.less)

Related Topics