Question

总结问题

我正在尝试将Vuetify实施到现有项目的一部分。但是在我将Vuetify添加到项目之后。我发现“输入”，“选择”之类的“默认” CSS样式已更改。并且使这些输入字段和所有选择看起来像纯文本，而不是输入字段然后选择。

因为我只想为项目的一部分实现Vuetify，所以Vuetify会覆盖“默认” CSS规则是很糟糕的。

我正在寻找一种对现有项目的一部分实施Vuetify的方法。但是项目的其余部分应该呈现为正常状态（仅使用默认CSS，而不是我自己的CSS）。

为了使问题更清晰，我将举一个显示两个选择的示例。第一个由Vuetify expandDynamically制作，第二个由普通HTML代码<v-select>

制作

提供背景并告诉我们您已经尝试过的内容

我已经尝试在输入字段中放入自定义CSS规则，并在Vuetify脚本和Vuetify CSS链接之后进行选择。但是Vuetify仍然会覆盖我的自定义CSS样式。

显示您的代码

HTML部分：

<select>

JS PART：

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

描述预期和实际结果

我希望我可以在该项目的某些部分使用Vuetify。但是与此同时，该项目的其余部分应该表现得与正常情况一样（使用默认CSS）。

Answer 1

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

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

就我而言，我只需要删除一些元素选择器，但不包括我自己添加的选择器。因此，这是我使用{{3}}插件的mkalus解决方案的变体。

我使用了filter选项来过滤选择器。其说明：

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

还有keepAtRules选项可以防止不必要的删除：

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

Answer 2

您可以尝试将规范化的CSS文件添加到您的项目中，而vuetify样式应仅在您需要时才适用，我使用this

如何避免Vuetify覆盖默认CSS

总结问题

提供背景并告诉我们您已经尝试过的内容

显示您的代码

描述预期和实际结果

2 个答案: