Vue-loader: Less @import once not working

[adcentury]

I import the same less file in two components, when a parent import both two children, the same less file will be included twice, even when I added a (once) after @import.

Is there a way to include the same file only once?

[yyx990803]

Each Vue file's style is compiled as a standalone file. If there are things shared between multiple components, they should be abstract (e.g. variables and mixins)

If some style should be applied globally, then just import it once in the root app component.

[psi-4ward]

Hi,
I stumbled over this too and think this breaks the module-behaviour.

If I have several (reusable) components for a specific css framework every component should _@import_ its styles. So i result in a much duplicated CSS file.
Moreover I need the _var-overwrite-file_ included in every component and it dosnt respect the global less/sass overwrites.

Probalby we could introduce a global keyword as counterpart to scoped ?

[volodalexey]

Finally, after 5 hours of searching through the web I found a solution!

At first I found optimize-css-assets-webpack-plugin, but it will be too slow and it looks like a hack, because "pollution" was caused by less/vue loaders.

Solution to use (reference).

Some shared.less file that generates not only variables and mixins, but also some shared styles:

@010: #2196f3;
.bg-c-010-mx(@color) {
  background-color: @color;
}
.bg-c-010 {
  .bg-c-010-mx(@010);
}

If you want to use this file in a lot of places, for code-completion or for some extended usage, just import this file once, and by all other times import this file as reference:
Main.vue:

<style lang="less">
  @import "../shared.less";

  .main {
    .bg-c-010;
  }
</style>

One.vue:

<style lang="less">
  @import (reference) "../shared.less";

  .one {
    .bg-c-010;
  }
</style>

Two.vue:

<style lang="less">
  @import (reference) "../shared.less";

  .two {
    .bg-c-010;
  }
</style>

Caveats: Main.vue should be referenced before all other components with shared.less.

[davodaslanifakor]

@volodalexey i really Thank you for your solution

[davidm-public]

@volodalexey awesome!

[jaht93]

Finally, after 5 hours of searching through the web I found a solution!

At first I found optimize-css-assets-webpack-plugin, but it will be too slow and it looks like a hack, because "pollution" was caused by less/vue loaders.

Solution to use (reference).

Some shared.less file that generates not only variables and mixins, but also some shared styles:

@010: #2196f3;
.bg-c-010-mx(@color) {
  background-color: @color;
}
.bg-c-010 {
  .bg-c-010-mx(@010);
}

If you want to use this file in a lot of places, for code-completion or for some extended usage, just import this file once, and by all other times import this file as reference:
Main.vue:

<style lang="less">
  @import "../shared.less";

  .main {
    .bg-c-010;
  }
</style>

One.vue:

<style lang="less">
  @import (reference) "../shared.less";

  .one {
    .bg-c-010;
  }
</style>

Two.vue:

<style lang="less">
  @import (reference) "../shared.less";

  .two {
    .bg-c-010;
  }
</style>

Caveats: Main.vue should be referenced before all other components with shared.less.

I confirm, this solution works perfectly in vue and react

[tjcchen]

Very helpful. Thanks @volodalexey!