如何避免 Vuetify 覆盖默认 CSS
Posted
技术标签:
【中文标题】如何避免 Vuetify 覆盖默认 CSS【英文标题】:How to avoid Vuetify overrides default CSS 【发布时间】:2019-06-15 01:00:21 【问题描述】:总结问题
我正在尝试将 Vuetify 实施到现有项目的一部分。但是在我将 Vuetify 添加到项目之后。我发现类似输入字段的“默认” CSS 样式,选择已更改。它使那些输入字段和选择看起来像纯文本,而不是输入字段和选择。
因为我只想为项目的一部分实现 Vuetify,所以 Vuetify 覆盖“默认”CSS 规则是不好的。
我正在寻找一种方法来为现有项目的一部分实施 Vuetify。但是项目的其余部分应该正常渲染(仅使用默认 CSS,而不是我自己的 CSS)。
为了使 Qustion 更加清晰,我将举一个显示两个选择的示例。第一个是用 Vuetify <v-select>
制作的,第二个是用普通 html 代码制作的 <select>
提供背景并告诉我们您已经尝试过什么
我已经尝试为输入字段设置自定义 CSS 规则,并在 Vuetify Script 和 Vuetify CSS 链接之后选择。但是 Vuetify 仍然会覆盖我的自定义 CSS 样式。
显示您的代码
HTML 部分:
<div id="app">
<div>Vuetify select:</div>
<v-select
:items="items"
>
</v-select>
<hr/>
<div>
<div>Normal select:</div>
<select>
<option value="0">test1</option>
<option value="1">test2</option>
<option value="2">test3</option>
</select>
</div>
</div>
JS部分:
new Vue(
el: '#app',
data()
return
item: null,
items: [
text: "a"
,
text: "b"
,
text: "c"
,
]
)
描述预期和实际结果
我希望我可以在这个项目的某些部分使用 Vuetify。但与此同时,项目的其余部分应该正常运行(使用默认 CSS)。
【问题讨论】:
【参考方案1】:这是由 Vuetify 重置样式 (src/styles/generic/_reset.scss
) 引起的。
该问题还有一个问题:https://github.com/vuetifyjs/vuetify/issues/8530。您可以从mkalus 中找到little postcss hack,它通过包装器隔离必要的样式(将前缀类添加到选择器)。
就我而言,我只需要删除一些元素选择器,不包括我自己添加的那些。所以这是我使用 postcss-filter-rules 插件的 mkalus 解决方案的变体。
我使用filter
选项过滤选择器。其说明:
如果函数返回
true
,则保留选择器,否则将其删除。
还有keepAtRules
选项可防止不必要的删除:
默认情况下,
@font-face
和任何空的 at 规则(过滤后)都会被删除。要保留特定的 at 规则,请为此选项提供一组名称。要保留所有 at 规则,请使用值true
。
vue.config.js(Vue CLI 4):
const autoprefixer = require('autoprefixer')
const filterRules = require('postcss-filter-rules')
module.exports =
/* ... */
css:
loaderOptions:
postcss:
plugins: [
filterRules(
filter: (selector) =>
const re = new RegExp(/^(html|body|\*|ul|ol|select|small)(\W|$)/, 'i')
const exception = '.vue-global'
return !re.test(selector) || selector.includes(exception)
,
keepAtRules: true
),
autoprefixer
]
/* ... */
现在我已经删除了一些 Vuetify 重置样式,我仍然可以设置 html
和其他类似这样的元素:
html.vue-global
font-size 16px
【讨论】:
【参考方案2】:您可以尝试将规范化 css 文件添加到您的项目中,并且 vuetify 样式应该只适用于您想要的时候,我使用 this
【讨论】:
你能描述更多关于如何使用它吗?我有点困惑。如果我把这个 CSS 样式放在 Vuetify 样式之前,Vuetify 仍然会覆盖它,对吗?但是如果我把这个 CSS 放在 Vuetify 样式之后,它将覆盖 Vuetify。这会破坏我的 Vuetify UI。如何将 Vuetify 样式仅应用于 Vuetify UI 是关键。但我不知道该怎么做。 在 vuetify 之后添加 normalizer 不会覆盖 vuetify 对元素的自定义 css,它只会触及全局 html 元素并对其进行标准化,试试看 如果这不起作用,解决方法是只导入您需要的组件,假设您只需要v-select
组件,您可以按照此guide 进行操作
那行不通。我在 Vuetify 之后添加了 normalize.css。但是 Vuetify 仍然使所有输入字段和选择看起来像纯文本。我认为我需要的组件的导入也不起作用。因为说我需要v-select
,在我项目的其他部分我有很多<select>
。 Vuetify 仍然覆盖了 select 元素的 CSS 样式。我现在在想唯一的方法可能是向我所有的“默认”输入字段、选择、按钮等添加一个类,并使它们看起来像原始的。
当你在 vuetify 中导入一个组件就像给一个元素添加一个类一样,我记得使用 vuetify 组件并且我的其他元素仍然具有默认样式,值得一试以上是关于如何避免 Vuetify 覆盖默认 CSS的主要内容,如果未能解决你的问题,请参考以下文章