vue-cli3 配置全局less 、sass 变量

Z时代
2024-01-10
分类：综合

vue

之前在用vue-cli3框架的时候对于常用的less 、sass 变量都是需要时就在单文件中引入文件，这样做比较麻烦。那么基于 vue-cli3 如何配置全局的less 、sass 变量？

《1》安装
	npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
《2》vue.config.js配置
	1.配置全局less变量
		//第三方插件
		pluginOptions: {
			"style-resources-loader": {
				preProcessor: "less",
				patterns: [
				  //这个是加上自己的路径，注意：试过不能使用别名路径
				  path.resolve(__dirname, "./src/assets/variable.less")
				 ]
			 }
		 }
	2.配置全局sass变量
		css: {
			loaderOptions: {
			  // 给 sass-loader 传递选项
			  sass: {
				// @/ 是 src/ 的别名
				data: `@import "~@/variables.scss";`
			  }
			}
		}