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

Question

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

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

1. 为bootstrap的css文件添加前缀，并仅将其应用于页面内容的内部部分（AngularJS，新模块）。问题是popup和angular-bootstrap第三方组件仍然被遗留的CSS打断。
2. 将我的整个内页（AngularJS模块）放在单独的IFrame中，嵌入到包含旧CSS的页面中。

似乎使用IFrame解决了我的问题，但我知道不鼓励使用IFrame，我正在为我的问题寻找最佳解决方案。

1. 您认为IFrame在这种情况下是一种很好的做法吗？
2. 您有其他经过验证的解决方案吗？

Answer 1

计划使用iframe只是为了解决css冲突 - 这不是一个好主意。虽然在某些情况下iframe可以派上用场，但大多数情况下它的使用都被滥用，只是为了轻松解决一些问题。

  

您是否认为IFrame在这种情况下是一种很好的做法？

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

  

你有其他经过验证的解决方案吗？

嗯，我没有经过验证的解决方案，但您已经提到了一个可以轻松实现的想法。 Bootstrap可以根据您想要使用较少变量的任何程度进行自定义。 例如，对于您的问题，只需使用less来命名引导程序样式。

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

并没有使用less / sass来编译css是很复杂的。一旦你习惯了它，这将使FE开发变得比以前容易。