【VUE - 工具 - LESS】03、vuecli3.0+使用less定义全局变量

• 步骤一: 安装依赖

yarn add style-resources-loader -D

• 步骤二：在vue.config.js中进行配置

const path = require('path')
module.exports = {
	pluginOptions: {
	  'style-resources-loader': {
	      preProcessor: 'less',
	      patterns: [path.resolve(__dirname, './src/styles/variables.less')]
	  }
	}
}

• 步骤三：在src/styles下新建vairables.less

@warningColor: red;

• 步骤四：使用

<style lang="less">
.wrap {
	color: @warningColor;
}
</style>

注意：
若编译报错@warningColor is undefined 则需要执行步骤五

• 步骤五：

yarn add vue-cli-plugin-style-resources-loader -D

记录vuecli3.0+less配置全局变量的步骤，方便以后查找