vue项目中抽离less公共变量

less文件与组件样式代码

/*index.less*/
 /* Tip: 该文件在整个项目中全局引入，.vue文件内的

less 全局变量引入方法一

使用css.loaderOptions
less此方法只支持变量key:value赋值

module.exports = {
  css: {
  	loaderOptions: {
	  less: {
        globalVars: {
          "@color": "#f00"
        }
      }
	}
  }
}

less 全局变量引入方法二

使用pluginOptions
需要执行 vue add style-resources-loader命令
命令执行会自动安装 vue-cli-plugin-style-resources-loader会自动提示使用什么预编译语言、会根据你选择的自动配置，只需要填写 引用文件的路径

友情提示：如果使用此方法安装了以上插件，而又放弃这种方案，编译时可能会报错，可以npm uninstall vue-cli-plugin-style-resources-loader 卸载此插件

module.exports = {
  pluginOptions: {
  	"style-resources-loader": {
      preProcessor: "less",
      patterns: "./src/assets/variable.less"
    }
  }
}

注：踩过的坑
在less文件中每行代码后必须加 ; 分号，否则编译会报错