Vue.js Vuetify样式泄漏

我使用Vuetify构建了一个小应用程序，并将其打包到

bundle.min.js

，包括CSS。但是，将捆绑包导入

index.html

-文件时，如下所示：

我可以看到一些Vuetify样式正在泄漏到导入我的捆绑包的应用程序中。在查看源CSS后，我意识到大多数CSS的作用域是

v-application

或其他

v-component

父项，但是一些CSS重置和其他影响的样式，例如

html

和

body

正在泄漏。这方面的一个例子是将我的bundle注入stackoverflow首页-大多数文本变大，我可以理解为什么，例如，Top Questions标题有一个附加的样式规则：

html {
    font-size: 16px;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

我一直在寻找解决方案，并尝试了我找到的一切，但似乎没有一个简单的解决方案。我知道为什么Vuetify是以这种方式构建的，但是是否有任何方法可以确定或忽略Vuetify中的CSS重置，以便使用我的捆绑包的客户端可以自行决定要进行哪些全局重置？此功能肯定有一个用例？

编辑： 您也可以在样式标记中最上面的组件中执行此操作，这样它将位于您的包中

如果您使用较少的/SASS/SCSS，您可以不用将CSS捆绑到JS中，而是将vuetify CSS导入到该文件中，并以传统方式将创建的CSS包含在HTML中

LESS/SCSS（如果使用SASS，则可以省略花括号）

HTML/PHP

<link rel="stylesheet" type="text/css" href="/path/to/your/created.css">

---

不必下载vuetify.min.css，您可以使用CDN的链接，只需注意，每次下载时都会将LESS/SASS/SCSS传输到css，因此，如果您经常修改它，下载一次要快得多。

vuetify是一个非常固执己见的框架。它的设计并不是为了更好地与其他CSS配合使用，这些CSS不是为了与它共存而构建的。

<link rel="stylesheet" type="text/css" href="/path/to/your/created.css">