vue-cli 配置预处理器全局变量(以less为例)

vue官方提供了两种方法

1.style-resources-loader

2.vue-cli-plugin-style-resources-loader

使用第一种方法自己通过npm安装经常会出现报错：

TypeError: Cannot read property 'style-resources-loader' of undefined

或者  variable xxx is undefined

所以，删除style-resources-loader(虽然vue-cli-plugin的插件还是会安装这个)，我们直接用第二种方法通过vue add来安装：

1.安装：vue add style-resources-loader

2.选择相应的预处理器

3.vue.config.js中配置pluginOptions

const path = require("path")

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

css自动化导入文件不止用于变量，还可用于颜色、变量、mixin等，详情CSS 相关 | Vue CLI