在 vue-cli3 项目中如何使用 less 全局变量，并解决 Variable @primary-color is undefined 错误。

由于我需要在项目中自定义主题色等配置，根据官方文档介绍，需要安装 less ，我项目中用的是 ViewUI ，得根据UI框架指定的 less 版本进行安装，否则可能会安装失败。

安装less

npm i less@2.7.3 less-loader@4.0.6 --save-dev

使用less变量

./src/assets/theme.less

@import "~view-design/src/styles/index";

@primary-color: #A3C603;

man.js

import '@/assets/theme.less'

在组建中使用 less 变量

<style scoped lang="less">
.container {
    background-color: @primary-color;
}
</style>

然后发现报错了：

Variable @primary-color is undefined

解决错误

安装 style-resources-loader

npm i style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

vue.config.js

const path = require('path')

module.exports = {
  ......
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/theme.less')] // 引入全局样式变量
    }
  }
}