记录: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配置全局变量的步骤,方便以后查找