我已经开始在一个旧的现有项目中使用Vue.js和Vuetify。因此,我没有重写所有前端,而是导入了Vue并替换了某些部分。
然后,我注意到了非常意外的行为-Vuetify具有通用类的全局样式,.title并且影响整个页面,而不仅是Vue部分页面。
因此,问题是,如何隔离Vue组件内的vuetify样式?
UPD:根据建议@DigitalDrifter,我尝试使用stylus块级导入。所以我删除了
import 'vuetify/dist/vuetify.min.css'
Run Code Online (Sandbox Code Playgroud)
从main.js并创建一个.styl具有以下内容的新文件(而不是导入的CSS):
.vuetify-styles
@import '~vuetify/src/stylus/main'
Run Code Online (Sandbox Code Playgroud)
然后将此类添加到根组件: <App class="vuetify-styles">
UPD2:之后,您将获得与stylus编译相关的错误。有关它的更多信息-> https://github.com/vuetifyjs/vuetify/issues/4864