之前在用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";` } } }
经过这么点小优化,就无需在需要使用变量时在单文件中引入一次文件