如何隔离Vuetify的全局样式

Question

我开始在一个旧项目中使用Vue.js和Vuetify。因此，我并没有重新编写所有的前端代码，只是导入了Vue并替换了一些部分。

然后我注意到了一个非常意外的行为 - Vuetify为常见类别（如.title）设置了全局样式，并且它会影响整个页面，而不仅仅是Vue部分。

那么问题来了，如何在Vue组件内部隔离Vuetify样式？

---

更新：正如@DigitalDrifter建议的那样，我尝试使用了stylus块级导入。所以我移除了......

import 'vuetify/dist/vuetify.min.css' 

从 main.js 中创建了一个新的 .styl 文件（代替 css 进行引入），其内容如下：

from main.js and created a new .styl file (which was imported instead css) with the following content:

.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中导入它即可。

Translated text:

然后只需在你的main.js中导入它即可。

import './vuetify-styles.less'

- Vadym

---

你说的“isolate”是什么意思？ - Dimitrius Lachi

我的意思是创建类似于vuetify.min.css的命名空间，作为所有来自此样式和其他Vue相关样式的根类。 - Vadym

Answer 1

Stylus支持块级导入。

如果您有以下内容：

// bar.styl
.bar
  width 10px

// foo.styl
.foo
  @import 'bar.styl'

最终结果将是：

.foo .bar {
  width: 10px;
}

- Brian Lee