我有一个使用bootstrap 3和4的应用程序 . 它是一个非常庞大的应用程序,基于角度1和2的组合,我们已经为我们的角度1应用程序编写了很多scss文件 .
我需要:
确保到目前为止所写的所有scss都不会影响我们将插入角度为1页的ng2组件 .
Angular 4 / bootstrap 4 scss不应影响当前角度1 / bootstrap 3
目前对于角度1我们有main.scss文件导入所有组件样式:
.ng1-app, *:not(.ng2-app){
@import "bootstrap3";
//override vendor theme of slick-carousel
@import "fonts/slick-font";
@import "components/slick-carousel";
// Variables & Mixin
@import "helpers/variables";
@import "helpers/mixin";
@import "helpers/typography";
//Fonts
@import "fonts/icon-font";
@import "fonts/font";
@import "fonts/icon-font-2";
//Layout
@import "layout/common";
@import "layout/header";
@import "layout/main";
@import "layout/sidebar";
// Components
@import "components/navbar";
@import "components/tabs";
@import "components/checkbox";
}
对于角度2,我们有一个vendor.scss文件来导入bootstrap 4:
.ng2-app, *:not(.ng1-app) {
@import '../../../node_modules/bootstrap/scss/bootstrap4';
}
html中的快速示例:
<div class="ng-one">
<p class="test">This is ng1 test</p>
<div class="ng-two">
<p class="test">This is ng2 test</p>
</div>
</div>
寻找方向,因为使用angular1 / 2和bootstrap 3/4构建混合应用程序的资源非常少 .
谢谢