vue cli3.x 项目中引入 less 全局变量

项目中使用 less 变量定义了项目的一些主题颜色，这里采用 style-resources-loader 来进行全局引入。

具体配置如下：

1、安装 style-resources-loader，并选择想要使用的语言（本项目中使用less）

vue add style-resources-loader

 

安装完成后，style-resources-loader 和 vue-cli-plugin-style-resources-loader 会被自动添加到 package.json 的开发环境依赖；并且会在 vue.config.js 中生成如下配置。

2、配置 vue.config.js

// vue.config.js

const path = require("path");
module.exports = {

//...

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/style/theme.less')
      ]
    }
  }
}