如何强制 VueJS 在 css 中不生成“*、::after、::before”元素答案

【问题标题】：How to force VueJS not to produce a "*, ::after, ::before" element in css如何强制 VueJS 在 css 中不生成“*、::after、::before”元素
【发布时间】：2019-02-21 12:46:50
【问题描述】：

我们有一个完全用 Sapui5 编码的网站。我们决定开始并慢慢替换网站的部分内容，同时在 Vue.js 中开发网站的所有新功能。到目前为止这很容易，因为 Vue 只需要一个 div 元素，其中 js 脚本是从其中获取的。到目前为止一切正常！

问题在于，在构建/缩小之后，生成的 CSS 包含一个

*, ::before ::after {
    box-sizing: inherit;
}

规则，当然会影响网站的其余部分。

有什么方法可以强制 Vue.js 避免在全球范围内创建这个但特定于类？我使用 Vuetify 和 vue-cli 来构建。

【问题讨论】：

如果它是一个 vue 应用程序，您将拥有一个 index.html 文件，您可以在其中应用您想要的 css 或覆盖您的 index.vue 的 css 文件中的 css，两者都可以工作。
你可以搜索 box-sizing: inherit; 并查看它是否在项目中被引用，否则它可能是 Vuetify，然后你可以通过设置 box-sizing: initial; 覆盖它。只是一个想法，你为什么要删除它？ :)
我查看了firefox的开发者控制台，发现这条规则来自app.css。我尝试按照建议在 App.vue 中覆盖它，但随后导致 Vuetify 元素出现问题。更具体地说，网站的其余部分使用 box-sizing: content-box，而 Vuetify 使用的是 box-sizing: border-box。
@PatroklosSamaras 你有两个选择。要么放弃 Vuetify，要么将应用程序的其余部分更改为使用 box-sizing: border-box;。第二个选项是我相信大多数开发人员的建议。这就是为什么它在社区中被广泛使用的原因。取决于您的应用程序的规模，但更改为border-box: box-sizing; 并在需要它的元素上调整width 和border-box: content-box;。
@Dejan.S 非常感谢。我也会选择第二个。如果您可以添加您的评论作为投票的答案，以便版主可以关闭问题，那将是完美的！

标签： javascript css vue.js vuetify.js

【解决方案1】：

box-sizing: border-box; 非常好，因为您不必考虑是否为元素设置了宽度，假设您添加了填充或边框，它“在内部增长”，因此不会破坏您的布局.在许多情况下，这在行为中都是有用的。如果您想确切了解为什么我可以发布更好的场景解释？言归正传:)

你可以做这些

1)
扔掉 Vuetify 继续使用border-box: content-box;

2)（推荐）
将应用程序的其余部分更改为使用 box-sizing: border-box;。这是我相信大多数开发人员会推荐的选项。这就是为什么它在社区中被广泛使用的原因。根据您的应用程序的规模，但更改为border-box: box-sizing; 并在需要它的元素上调整width 和border-box: content-box;。

【讨论】：