vue.js - Vue CLI 4 - Vuetfiy,scss 变量之间的冲突
问题描述
安装 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!./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 = {
publicPath: "/",
devServer: {
disableHostCheck: true
},
pwa: pwaArgs,
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/scss/_variables.scss";`
}
}
}
};
但是,如果我将变量名更改为 $red-color 一切正常。
知道如何避免这种冲突吗?
解决方案
推荐阅读
- c# - 如何在不涉及用户身份验证的情况下获取 Azure 访问令牌(针对应用程序,而不是用户)?
- angular - 如何在 HTML 中将 base64 显示为可下载链接?
- concurrency - 双核机器上 2+ youtube 视频的并发上下文切换
- ios - Swift UITableView 分隔符隐藏直到滚动
- c - 我可以使用 C 中的 wait(&status) 和循环清理具有相同父级的多个子进程吗?
- angularjs - Angular 中的 GET 请求
- python - 确保 chromedriver 和 google-chrome 在 ubuntu 中的版本相同
- android - 找不到 FCM 令牌
- list - 放入ZStack时swiftui列表不起作用
- html - 尽管我的文件在同一个工作区中,但我在 vs 代码上不断收到“无法打开文件...找不到文件”消息