0

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

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

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

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

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

4

1 回答 1

0

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

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

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

这可行吗？

于 2012-07-08T12:10:13.063 回答