Vuetify 样式泄漏答案

【问题标题】：Vuetify styles leakingVuetify 样式泄漏
【发布时间】：2020-01-31 02:43:35
【问题描述】：

我使用 Vuetify 构建了一个小型应用程序，并将其全部捆绑到 bundle.min.js 中，包括 CSS。但是，当将包导入index.html-文件时，如下所示：

<script src=js/bundle.min.js></script>

我可以看到一些 Vuetify 样式正在泄漏到正在导入我的包的应用程序中。在检查了源 CSS 之后，我意识到大多数 CSS 都在 v-application 或其他 v-component 父级下，但一些 CSS 重置和其他影响例如 html 和 body 的样式正在泄漏。这方面的一个示例是将我的包注入到 stackoverflow 首页 - 大多数文本变得更大，我可以看到为什么，例如热门问题标题添加了样式规则：

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 重置，以便使用我的捆绑包的客户可以决定他们自己想要哪些全局重置？这个功能肯定有用例吗？

【问题讨论】：

Vuetify 是一个非常自以为是的框架。它的设计初衷并不是为了与其他不是为了与之共存而构建的 CSS 一起玩。

标签： vue.js vuetify.js

【解决方案1】：

编辑： 您也可以在样式标签内的最顶层组件内执行此操作，这样它将在您的包中 inside。

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

LESS/SCSS（使用 SASS 你可以省略花括号）

.your_class{
  @import "./vuetify.min.css";
}

HTML/PHP

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

您可以使用 CDN 的链接代替下载 vuetify.min.css，但请注意，每次将 LESS/SASS/SCSS 转换为 CSS 时都会下载它，因此如果您下载一次会更快经常修改。

【讨论】：