覆盖Vuetify变量
覆盖Vuetify变量
提问于 2020-06-11 04:01:20
我在我的项目中使用Vuetify，我想使用一个变量文件来覆盖Vuetify生成的样式。
我使用a carte方法加载组件及其相应的样式，因此我不会使用以下方法导入Vuetify SASS文件：
@import '~vuetify/src/styles/styles.sass'
// Not using this method because I don't want to generate styles that are not being used by
// vuetify components I'm not using另外，我的项目是使用*.scss，而不是*.sass。
我还注入了一个全局SCSS文件，其中包含了我的vue.config.js中的混合器和其他变量
css: {
sourceMap: productionSourceMap,
loaderOptions: {
scss: {
prependData: `@import '@/scss/_common.scss';`
}
}
},我在那个$border-radius-root文件中包含了一个名为common.scss的Vuetify变量，但是它似乎没有任何效果。
知道如何做我想做的，而不必编写全新的CSS规则来覆盖Vuetify生成的样式表吗？基本上，我想用他们自己的样式表生成器来改变Vuetify使用的单元。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-06-12 03:18:09
实际上，解决方案是，我以前不考虑这个问题，把另一个加载程序添加到vue.config.js中是愚蠢的
css: {
sourceMap: productionSourceMap,
loaderOptions: {
scss: {
prependData: `@import '@/scss/_common.scss';`
},
sass: {
prependData: `@import '@/sass/_vuetify-variables.sass';`
}
}
},因为vuetify使用sass作为css预处理程序，所以它需要sass加载器来处理变量重写并将其应用到框架中。
Stack Overflow用户
发布于 2021-11-05 14:05:14
如果您使用的是Nuxt：
您可以在customVariable文件中的vuetify对象中添加vuetify路径
Note您必须启用treeShake。此选项是自定义SASS变量工作所必需的。
示例：
vuetify: {
// usually file should be in assets folder
customVariables: ['~/path/to/variables.scss'],
treeShake: true,
}如果您使用的是Vue CLI：
- 创建一个名为
sass、scss或styles的文件夹 - 在此文件夹中创建新文件并命名为：
variables.scss或variables.sass
vuetify-loader将自动引导变量到Vue CLI的编译过程，覆盖框架默认值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62316845
复制相关文章
相似问题
腾讯云开发者
