我已经开始在现有的旧元素中使用 Vue.js 和 Vuetify。所以我没有重写所有的前端,我只是导入了 Vue 并替换了一些部分。
然后我注意到一个非常出乎意料的行为——Vuetify 具有通用类的全局样式,例如 .title
它会影响整个页面,而不仅仅是Vue
部分。
所以,问题是,如何在 Vue 组件中隔离 vuetify 样式?
UPD:按照@DigitalDrifter 的建议,我尝试使用 stylus
block 级导入。所以我删除了
import 'vuetify/dist/vuetify.min.css'
来自 main.js
并创建了一个新的 .styl
包含以下内容的文件(导入而不是 css):
.vuetify-styles
@import '~vuetify/src/stylus/main'
然后将这个类添加到根组件中:<App class="vuetify-styles">
UPD2:之后您可以获得与 stylus
相关的错误汇编。更多信息 -> https://github.com/vuetifyjs/vuetify/issues/4864
UPD3: less 对我来说也很好用。
# vuetify-styles.less
.vuetify-styles {
@import (less) '../../node_modules/vuetify/dist/vuetify.min.css';
}
然后将其导入您的 main.js
import './vuetify-styles.less'
最佳答案
手写笔支持block level imports .
如果您有以下情况:
// bar.styl
.bar
width 10px
// foo.styl
.foo
@import 'bar.styl'
最终结果将是:
.foo .bar {
width: 10px;
}
关于css - 如何隔离 Vuetify 全局样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54201469/