Css 在遗留web应用程序中集成AngularJS和Bootstrap

我们有一个基于EXT-JS的遗留应用程序。 我们喜欢使用AngularJS和bootsrap将新模块添加到现有应用程序中。 我的问题是引导的CSS和遗留代码的CSS冲突。 新模块使用bootstrap和AngularJS编写，由遗留代码包装，因此我需要在同一页面上导入现有CSS和新CSS

我想到了两种可能的解决方案：

在引导的css文件中有一个前缀，并且只将其应用于页面内容的内部部分（AngularJS，新模块）。问题是弹出窗口和角度引导第三方组件仍然被遗留CSS中断

将我的整个内部页面（AngularJS模块）放在单独的IFrame中，嵌入到包含遗留CSS的页面中 似乎使用IFrame解决了我的问题，但我知道不鼓励使用IFrame，我正在为我的问题寻找最佳解决方案

您认为IFrame在这个场景中是一个好的实践吗

您是否有其他经验证的解决方案

---

计划使用iFrame只是为了避开css冲突——这不是一个好主意。尽管iFrame在某些情况下可以派上用场，但它的使用大多被滥用，只是为了轻松解决一些问题

您认为IFrame在这个场景中是一个好的实践吗

没有。这里唯一的问题是bs和extjs之间的css样式冲突。计划使用Iframe来解决这个问题确实是一个糟糕的选择。当您使用angularjs时，我觉得使用iframe可能会在某种程度上限制其使用。例如，如果您计划使用angularjs路由，我认为将其嵌入iframe中的导航后退和前进按钮将无法按预期工作。当使用Iframe时，调试前端问题将非常困难

您是否有其他经验证的解决方案

嗯，我没有一个行之有效的解决方案，但你已经提到了一个想法，这可能很容易工作。可以使用较少的变量在任何程度上自定义引导。 例如，对于您的问题，只需使用较少的名称空间来命名引导样式

.bs {
    @import "less/bootstrap.less"; 
}

---

不要陷入使用less/sass来编译css的思维模式，这很复杂。一旦你习惯了，这将使FE开发比以前容易得多。

谢谢你的回答。正如我的问题（在第一个可能的解决方案中）中所描述的，我已经尝试使用.bs{import…}，为bootstrap添加前缀，并为部分页面应用bootstrap。这已经解决了一些问题，机器人弹出窗口和第三方组件与模态层仍然有一些问题，因为他们直接在主体标签下呈现。