Webpack: How to load global less file in project?

[loatheb]

I'm using vue-cli with less to construct my project.

But how can I load a global less file in it?

// index.less
@primary-color: XXX;
@error-color: XXX;

at the parent component

// parent.vue
<style lang="less">
@import './index.less';

// index.less works well
</style>

In child component

<style lang="less">
// index.less doesn't work
</style>

How can I use index.less in the child component except by rewriting @import './index.less'; again? In another words, how can I load index.less globally?

Sorry for bothering.

[LinusBorg]

rewriting @import './index.less'; again?

That's what you have to do, yep.

[loatheb]

I see..

Thanks.

[hellovue2017]

我也想实现这样的功能，做一个全局样式，子组件中无需在引入

[zhangkun-Jser]

我也想实现

[davodaslanifakor]

@loatheb
@LinusBorg
@hellovue2017
@978895036
@dotob

so what happen how solve this problem?

[LinusBorg]

Nothing. This is a closed issue, the question was answered.

You may want to look at this, though:

https://github.com/shakacode/sass-resources-loader/blob/master/README.md

[davodaslanifakor]

@LinusBorg Tnx but i found some solution
this is beast answered ifond

[LinusBorg]

Then why the screaming? :D

[tjcchen]

Hi there, I thought this issue might be already resolved. But I post my solutions here if someone still needs them later.

Solution 1:

In vue.config.js file, configure your global less resources like this:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        additionalData: `@import '@/style/common.less';`
      }
    }
  }
};

Solution 2:

In your single file component, namely .vue file, configure your style like this:

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

#app {
  background: @bgColor;
  font-size: 100%;
}
</style>

Note: (reference) flag is used to make variables defined in variables.less take effect in current component. If you just want to import common resources, @import "../style/common.less"; is sufficient to do the trick.

[kaocong]

Hi there, I thought this issue might be already resolved. But I post my solutions here if someone still needs them later.

Solution 1:

In vue.config.js file, configure your global less resources like this:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        additionalData: `@import '@/style/common.less';`
      }
    }
  }
};

Solution 2:

In your single file component, namely .vue file, configure your style like this:

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

#app {
  background: @bgColor;
  font-size: 100%;
}
</style>

Note: (reference) flag is used to make variables defined in variables.less take effect in current component. If you just want to import common resources, @import "../style/common.less"; is sufficient to do the trick.

我尝试使用方案1来解决全局引用less的问题，
但是好像并没有生效。

在官网中：向预处理器 Loader 传递选项
并没有less使用additionalData的例子，

并且在使用时，报错：Variable @xxx is undefined