提问人：Majid Lotfinia 提问时间：4/19/2020 更新时间：12/3/2021 访问量：906
更改特定组件中的 Vuetify SCSS 变量
change vuetify scss variables in specific component
问：
我在 Vue-cli 项目中使用了 Vuetify。我在项目的目录中有文件。现在我想只在一个组件中更改 Vuetify Scss 变量而不影响其他组件？variables.scsssrc/styles
例如，我只想更改一个组件中的值。我该怎么做？$icon-size, $avatar-margin-x
答：
0赞
Nebulosar
12/3/2021
#1
我想你正在寻找这样的东西：https://vuetifyjs.com/en/features/sass-variables/#usage-in-templates
对于全局变量
<style lang="sass">
@import '~vuetify/src/styles/styles.sass'
@media #{map-get($display-breakpoints, 'md-and-down')}
.custom-class
display: none
</style>
每个组件：
<style lang="scss">
@import '~vuetify/src/components/VStepper/_variables.scss';
.custom-class {
padding: $stepper-step-padding;
}
</style>
评论