3

背景：我有一个 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/& >>>。但这并不完全有效，因为 bootstrap 还将样式设置为:root, html&body元素。因此，当在作用域 CSS 中使用深度选择器时，不会应用这些样式，因为最终结果将是这样的：

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

上述方法不起作用，因为身体不是 the 的孩子，customers-container而是相反。

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

4

1 回答 1

0

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

.administrator-view {

/// the complete bootstrap stylesheet

}

对 vue-material 做同样的事情，但对客户类做同样的事情.customer-view

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

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

编辑：在网站上进行了搜索，您应该检查限制引导样式的范围

于 2019-02-28T14:48:46.377 回答