欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

记录:vuecli3.0+使用less定义全局变量

程序员文章站 2022-05-17 21:00:24
...
  • 步骤一: 安装依赖
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配置全局变量的步骤,方便以后查找