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

Posted 2023-02-22

【中文标题】如何在 vue 中隔离/作用域全局 css

【英文标题】：How to isolate / scope global css in vue

【发布时间】：2019-07-22 09:01:30

【问题描述】：

上下文：我有一个 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 知识不足以自己解决这个问题，而且我似乎无法在网上找到答案。

【问题讨论】：

我相信在特定的 Vue 组件中，您可以使用

【参考方案1】：

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

.administrator-view 

/// the complete bootstrap stylesheet

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

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

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

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

【讨论】：

问题是引导程序还会向html 和body 元素添加内容。我已经编辑了我的问题以明确这一点。

什么意思？您是否从 index.html 中删除 CSS？如果您将整个引导程序样式限定在其中一个类中，然后将该类添加到 HTML 标记中，那么您应该不会有太大问题。在最坏的情况下，您需要搜索引导样式表并删除 html 选择器，以便将这些样式应用于您的基类。编辑：在网站上进行了搜索，您应该检查***.com/questions/10568065/…

感谢您的帮助，但下载 bootstrap css 并自己编辑它让我以后很难更新我的依赖项。我很想在 webpack 代码拆分和块命名或类似的东西中找到答案。