less-loader: @import inserts duplicates

The solution is to use @import (reference):

@import (reference) 'base.less';

.foo { ... }

I don’t see this as “less’ behavior” at all. The default behavior for @import in less is “@import (once)”. So, in my opinion, this is the opposite of less’ behavior.

Not yet. PRs welcome though 😃

The default behavior for @import in less is “@import (once)”.

If less’ default behavior now is @import (once) and the issue still exists, we should revise it. At the time of writing, it was not less’ default behavior.

If the imported file contains classes that you are using in your HTML, you should still import it somewhere without (reference).

Importing something with @import (reference) means that you are not interested in the css output, but in variables, mixins or css-classes because you are extending them.

Would LOVE a fix for this!

I don’t think that we will fix this. It’s less’ behavior and webpack’s output should not be different than less’ output.

Is this a solution for 2.?

The @import (reference) way works great form me. Especially using with vue-router, there is a common App.vue for entrance, where I put the @import common.less for once, and the rest pages, just import them with (reference).

I agree with @tommck Default less behaviour is to include things just once

// base.less
@front-color: red;
@back-color: blue;

.base { color: @front-color; }

// a.less
@import 'base';

.a { color: @front-color; }

// b.less
@import 'base';

.b { background: @back-color; }

// final.less
@import 'a';
@import 'b';


// $ lessc final.less > final.css

// final.css
.base { color: red; }  // appears just once !!
.a { color: red; }
.b { background: blue; }

While the original issue here is related to sass/less/stylus, a fix/hack/patch for this is to use the optimize-css-assets-webpack-plugin in conjunction with extract-text-webpack-plugin to produce, like this: https://gist.github.com/phun-ky/766e5ec9f75eac61c945273a951f0c0b.

If you want to use this in dev, you will have to use a plugin like write-file-webpack-plugin to force webpack to write the file to disk in dev.