我有一个完全用 Sapui5 编码的网站。我们决定开始并慢慢替换网站的部分内容，同时也在 Vue.js 中开发网站的所有新功能。到目前为止这很容易，因为 Vue 只需要一个 div 元素，其中包含 js 脚本。到目前为止一切正常!
问题是在构建/缩小之后，生成的 CSS 包含一个
*, ::before ::after {
box-sizing: inherit;
}
规则，当然会影响网站的其余部分。
有什么方法可以强制 Vue.js 避免在全局范围内创建这个但特定于类？我使用 Vuetify 和 vue-cli 进行构建。
最佳答案
box-sizing: border-box; 非常好，因为您不必考虑是否为元素设置了宽度，假设您添加了填充或边框，它“在内部增长”，因此不会破坏您的布局。在许多情况下，这是一种需要且有用的行为。如果您想确切了解为什么我可以发布更好的场景解释？进入正题:)
你可以做其中任何一个
1)
扔掉 Vuetify 并继续使用 border-box: content-box;
2)(推荐)
将应用程序的其余部分更改为使用 box-sizing: border-box;。我认为这是大多数开发人员推荐的选项。这就是为什么它在社区中被广泛使用的原因。根据您的应用程序的规模，但更改为 border-box: box-sizing; 并调整 width 和 border-box: content-box; 在需要它的元素上。
关于javascript - 如何强制 VueJS 在 css 中不生成 "*,::after,::before"元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54807438/