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

Global CSS - how to implement multiple frameworks

本文关键字：框架 实现 CSS- 何实现 全局      更新时间：2023-09-26

我有一个主要是javascript的web软件/web应用程序。它使用extJS框架和大量的自定义脚本。全局样式表，称为main.css，由extJS库样式和我们自己的新样式以及extJS样式重写组成。这些都是使用SASS编译的。

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

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

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

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

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

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

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

这可行吗？

相关文章：