如何在 vue 中隔离/作用域全局 css

Question

上下文：我有一个 Vue CLI 项目，由两个主要部分组成：1) 客户看到的内容和 2) 管理员看到的内容。客户部分使用 Bootstrap CSS，另一部分使用 Vue Material。 尽管我打算将 Vue Material 部分重写为 Vuetify，但问题很可能仍然存在。

问题： Bootstrap CSS 与 Vue Material CSS 冲突。当 Bootstrap CSS 应用于 Vue Material 部分时，它看起来很乱。反过来也是；当 Vue Material CSS 应用于 Bootstrap 部分时，它看起来很乱。

我有什么办法可以完成这项工作吗？

这个 Vue 项目曾经被封装在一个 Laravel 项目中，大量使用 Laravel Mix。然后我可以使用混合文件将所有 Bootstrap CSS 编译成 1 个包。此捆绑包将在索引页面中使用以下行进行引用：

<link rel="stylesheet" href="bootstrap-bundle.css" id="bootstrap-stylesheet">
<link rel="stylesheet" href="vue-material-bundle.css" id="vue-material-stylesheet">

在 Vue 中使用两个布局组件，然后我可以像这样切换样式表：

// The Bootstrap layout component:
created() {
  document.getElementById('bootstrap-stylesheet').disabled = false;
  document.getElementById('vue-material-stylesheet').disabled = true;
}


// The Vue-Material layout component:
created() {
  document.getElementById('bootstrap-stylesheet').disabled = true;
  document.getElementById('vue-material-stylesheet').disabled = false;
}

这可能不是一个很好的解决方案，但它确实有效。也适用于大多数浏览器。

但是，我现在使用 Vue CLI 而不是 Laravel 和 Laravel Mix。这意味着我不能再轻松地命名生成的输出了。

我已经尝试过使用 CSS 深度选择器：/deep/ & >>>。但这并不完全有效，因为引导程序还将样式设置为 :root、html 和 body 元素。因此，在作用域 CSS 中使用深度选择器时，不会应用这些样式，因为最终结果会是这样的：

.customers-container {
    body {
        // bootstrap adds style to the body
    }
}

上述方法不起作用，因为 body 不是 customers-container 的子代，而是相反。

我觉得可能有一个解决方案，使用包名称或块名称或来自 Webpack 或 Vue 配置的其他内容。但是我的 Webpack 知识不足以自己解决这个问题，而且我似乎无法在网上找到答案。

Answer 1

我想到的第一件事就是下载 bootstrap 和 vue-material 样式表。然后您可以尝试执行以下操作，获取引导程序样式表并将其包装在如下内容中：

.administrator-view {

/// the complete bootstrap stylesheet

}

对 vue-material 执行相同操作，但使用客户类 .customer-view

然后，您可以在视图之间切换时在 HTML 或 body 元素中添加其中一个类。

不要忘记包含两个样式表！

编辑：在网站上进行了搜索，您应该检查Limit the scope of bootstrap styles