在vue-cli3.0项目中如何使用less全局变量

我们在开发过程中经常会定义很多的less 变量，但是 vue 文件中想使用 less 变量，就需要挨个引入，极其麻烦。 为解决这一问题，我们可以通过style-resources-loader和style-resources-loader vue-cli-plugin-style-resources-loader这个插件，帮助咱们一键式搞定以上问题。

第一步 定义一个 common.less 文件，将你想用的全局变量装入其中

@primary-color: #32b642; // 全局主色
@link-color: #32b642; // 链接色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号

下载style-resources-loader插件

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

将 themes.less 配置到vue.config.js中

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
    pluginOptions:{
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        resolve('src/assets/css/common.less')
      ]
    }
  }
}

重启项目。已测试，可以运行成功

这个时候，你就可以在自己的项目任意less中使用全局定义的变量。