时间戳

首页 > 解决方案 > 如何避免 Vuetify 覆盖默认 CSS

javascript - 如何避免 Vuetify 覆盖默认 CSS

问题描述

总结问题

我正在尝试将 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）。

标签： javascriptcssvuejs2vuetify.js

解决方案

这是由 Vuetify重置样式( src/styles/generic/_reset.scss) 引起的。

该问题还有一个问题：https ://github.com/vuetifyjs/vuetify/issues/8530 。您可以在mkalus中找到一些 postcss hack，它通过包装器隔离必要的样式（将前缀类添加到选择器）。

就我而言，我只需要删除一些元素选择器，不包括我自己添加的那些。所以这是我使用postcss-filter-rules插件对 mkalus 解决方案的变体。

我使用了filter过滤选择器的选项。其描述：

如果函数返回true，则保留选择器，否则将其删除。

keepAtRules以及防止不必要删除的选项：

默认情况下，@font-face任何空的 at 规则（过滤后）都会被删除。要保留特定的 at 规则，请为此选项提供一组名称。要保留所有规则，请使用 value 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

推荐阅读