全局 CSS - 如何实现多个框架答案

【问题标题】：Global CSS - how to implement multiple frameworks全局 CSS - 如何实现多个框架
【发布时间】：2012-07-08 20:10:13
【问题描述】：

我有一个主要是 javascript 的网络软件/网络应用程序。它使用 extJS 框架和相当多的自定义脚本。全局样式表，称为 main.css，由 extJS 库样式和我们自己的新样式和 extJS 样式覆盖组成。这都是使用 SASS 编译的。

现在，我想将应用程序嵌入到网页中。这是在没有嵌入包装器的情况下完成的，但实际上是在页面中运行应用程序，包括使用全局样式。

页面中的外部内容（非应用程序）是使用 Bootstrap CSS 框架和一些 jquery 元素以及一些 Bootstrap 覆盖和一些自定义样式的自定义设计。

我们无法将 Bootstrap 作为全局 CSS 加载，因为样式明显不同且独立于应用样式，因此希望避免冲突。

我如何为它们的相关领域调用样式，确保我们也可以轻松地执行版本控制/更新核心框架 - extJS、bootstrap、jquery 等，并避免全局样式之间的冲突 - 有效地将它们视为不同孤岛？

【问题讨论】：

标签： javascript css stylesheet global

【解决方案1】：

我可能误解了一个关键部分，但由于您使用的是 SASS，您可以简单地使用：

#some-custom-area {
    @import "path/to/bootstrap-result.css";
}

也就是说，使用 Bootstrap CSS 框架和您为其编写的所有自定义规则（在编译后放入的任何 CSS 文件中）并将它们导入到您的全局样式表中......但包装在 #some-custom-area选择器。当 SASS 编译它时，它将确保来自 Bootstrap 端的所有规则仅在 #some-custom-area 内有效。

这样可行吗？

【讨论】：