vue-cli3全局引入less变量

一个公共的less文件，怎么在项目中全局引入，让所用的.vue文件都能使用公共样式呢？因为项目需要，尝试了一下，记录下来，方便下次使用。

1、安装vue-cli插件

vue add style-resources-loader

执行命令之后，会自动安装 vue-cli-plugin-style-resources-loader，并且在vue.config.js文件中会自动生成代码

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
            patterns: [] //填写公共文件路径
  }
}

这样就可以实现全局引入less变量了。

二、具体的代码操作步骤：

1、项目目录

图片是项目的部分文件目录，其中红框处是公共样式，下面我们以color.less为例，在组件中引用定义的颜色样式。
color.less （定义颜色变量）

@fontColor:#42b983;

global.less (引入color.less)

@import './commen/color.less';
@import '../../components/testComponent/testComponent.less';

vue.config.js (填写less文件引入的样式)

 pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'less',
        patterns: [
            path.resolve(__dirname, './src/assets/less/global.less')
        ]
      }
    }

testComponent.vue , testComponent.less (测试组件及样式，运用全局less变量)

<template>
    <div class="testComponent">
        <h2>hello,Vue.js</h2>
        <p>1222222</p>
    </div>
</template>   
<script>
export default {
  name:'testComponent',
  data(){
    return{}
  }
}
</script>   

.testComponent{
   color: @fontColor;
}

把 testComponent.less在global.less文件中引入就可以实现效果了。
运行效果:

三、小结

主要是安装vue-cli插件，在config.js文件中写入引入路径。在写组件的时候，我没有把样式写在.vue文件中，而是单独抽离，再引入，这样可以避免.vu文件中代码过多，修改时不容易找代码的问题，也便于代码的维护。