Less Multiple Files Import

Less multiple files import

Isolate themes from each other with "unnamed" namespaces:

& {
    @import (multiple) "schemes.less"
    @import "dark.less";
}

& {
    @import (multiple) "schemes.less"
    @import "light.less";
}

// etc.

(Assuming you're using an up-to-date Less compiler, not lessphp - for that one you need minor modifications - e.g. remove (multiple) etc.).

Less, multiple imports

I thought within Less you could do imports at the rule level?
e.g. given two Less files with identical variable names but different values

When using lessc 2.4.0 (Less Compiler) [JavaScript] i can do:

black.less:

@tooltipBackgroundColor: black;

white.less:

 @tooltipBackgroundColor: white;

Then the following code:

.BlackBasedThemes
{
 @import "black";

  .MyDiv
  {
    background-color: @tooltipBackgroundColor;
  }
   // whole bunch of other stuff
}

.NonBlackBasedThemes
{
 @import "white";

  .MyDiv
  {
    background-color: @tooltipBackgroundColor;
  }
   // whole bunch of other stuff
}

compiles into:

.BlackBasedThemes .MyDiv {
  background-color: black;
}
.NonBlackBasedThemes .MyDiv {
  background-color: white;
}

Indeed you do not need the reference keyword (but it should also work when using it). It is not easy to see what your problem is.

Notice that you can also import one of the files into the global scope:

 @import "black"; // sets `@tooltipBackgroundColor` for the global scope
.BlackBasedThemes
{

  .MyDiv
  {
    background-color: @tooltipBackgroundColor; // uses `@tooltipBackgroundColor` from the global scope
  }
   // whole bunch of other stuff
}

.NonBlackBasedThemes
{
 @import "white";// sets `@tooltipBackgroundColor` for only the local scope

  .MyDiv
  {
    background-color: @tooltipBackgroundColor;// uses `@tooltipBackgroundColor` from the local scope
  }
   // whole bunch of other stuff
}

less: how to import multiple css?

Of course, just use import in you style.less:

@import "header.less";
@import "body.less";
@import "footer.less";

and the three less files will be compiled into the style.css

Every import possibilities are listed in the doc : http://lesscss.org/features/#import-options

Webpack import multiple less files using glob expressions?

I've added paths option and it works:

...
{
    loader: 'less-loader',
    options: {
        paths: [
            path.resolve(path.join(__dirname, 'app'))
        ],
        plugins: [
            require('less-plugin-glob')
        ]
    }
}

More details here: https://stackoverflow.com/a/43621947/2393499

Working example: https://github.com/notagency/webpack2-with-less-plugin-glob

compiling multiple less files into one fails to recognize variables from variables.less

You are on the right track:

In grid.less and in button.less you should include

@import 'variables.less';
@import 'mixins.less';

You want to make sure that any less file that you have should be able to compiled by itself (modular). It should already contain/import all the dependencies required.

In main.less should have the following:

@import 'grid.less';
@import 'button.less';

From the error it appears that you are missing a variable border-color. You should specify this in variables.less

---

Related Topics