如何隔离Vuetify整体风格

问题描述

我已经开始在一个旧的现有项目中将Vue.js与Vuetify一起使用.因此，我没有重写所有前端，而是导入了Vue并替换了某些部分.

I've started to use Vue.js with Vuetify within an old existing project. So I did not rewrite all frontend, I just imported Vue and replaced some parts.

然后我注意到了一个非常意外的行为-Vuetify具有通用类的通用样式，例如 .title ，它不仅会影响 Vue 部分，还会影响整个页面.

And then I've noticed quite an unexpected behavior - Vuetify has global styles for common classes like .title and it effects the whole page, not only Vue part.

所以，问题是，如何隔离Vue组件内的vuetify样式?

So, the questions is, how can I isolate vuetify styles inside Vue components?

UPD :按照建议@DigitalDrifter，我尝试使用 stylus 块级导入.所以我删除了

UPD: As suggested @DigitalDrifter I tried to use stylus block-level import. So I removed

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">

And then added this class to the root component: <App class="vuetify-styles">

UPD2 :之后，您将获得与 stylus 编译相关的错误.关于它的更多信息-> https://github.com/vuetifyjs/vuetify/issues/4864

UPD2: After that you can get bug related to stylus compilation. More about it -> https://github.com/vuetifyjs/vuetify/issues/4864

UPD3:对我来说也不错.

# vuetify-styles.less
.vuetify-styles {
  @import (less) '../../node_modules/vuetify/dist/vuetify.min.css';
}

然后将其导入您的 main.js

import './vuetify-styles.less'

推荐答案

手写笔支持块级导入.

如果您具有以下条件:

// bar.styl
.bar
  width 10px

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

最终结果将是:

.foo .bar {
  width: 10px;
}

这篇关于如何隔离Vuetify整体风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！