Vue.js Vue CLI 4-Vuetfiy,scss变量之间存在冲突
安装Vuetify后,我的一些scss变量出现问题。使用诸如$red、$blue、$pink等scss变量,。。。。VueJS返回一个错误:Vue.js Vue CLI 4-Vuetfiy,scss变量之间存在冲突,vue.js,sass,vuetify.js,Vue.js,Sass,Vuetify.js,安装Vuetify后,我的一些scss变量出现问题。使用诸如$red、$blue、$pink等scss变量,。。。。VueJS返回一个错误: Failed to compile. ./src/components/map/GmapAutocompleteField.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./nod
Failed to compile.
./src/components/map/GmapAutocompleteField.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/map/GmapAutocompleteField.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: ("base": #F44336, "lighten-5": #FFEBEE, "lighten-4": #FFCDD2, "lighten-3": #EF9A9A, "lighten-2": #E57373, "lighten-1": #EF5350, "darken-1": #E53935, "darken-2": #D32F2F, "darken-3": #C62828, "darken-4": #B71C1C, "accent-1": #FF8A80, "accent-2": #FF5252, "accent-3": #FF1744, "accent-4": #D50000, #e2001a: null) isn't a valid CSS value.
╷
46 │ background-color: $red;
│ ^^^^
╵
我使用vue.config.js在组件之间共享变量
module.exports={
公共路径:“/”,
开发服务器:{
disableHostCheck:true
},
pwa:pwaArgs,
css:{
装载机选项:{
scss:{
prependData:`@import“~@/scss/_variables.scss”`
}
}
}
};
但如果我将变量名更改为$red color,一切都会正常工作
你知道如何避免这种冲突吗