Angular2：如何在Angular-CLI中使用帶有@extend和mixins的bootstrap-sass？

Question

我正在嘗試使用帶有Angular 2的Twitter Bootstrap，SCSS和angular-cli生成的腳手架

我想應用最佳實踐，不要使用Bootstrap特定的CSS類來丟棄我的標記。 相反，我想通過@extend或mixins來應用/使用它們：

.mybutton {
   @extend .btn;
}

我的問題：

• SASS編譯器拋出一個錯誤，因為它不知道.btn
• 如果我添加@import "bootstrap"; 到我的.scss -File，它將在每個組件css中呈現完整的Bootstrap-CSS

到目前為止我做了什么

1. 添加@import "bootstrap"; 到我的app.component.scss

2. 將ViewEncapsulation.None應用於AppComponent ，因此Angular 2不應用Shadow DOM仿真，Bootstrap CSS適用於整個應用程序

     @Component({ encapsulation: ViewEncapsulation.None }) 

3. 將以下塊包含在angular-cli-build.js ，因此相對@import將起作用

    sassCompiler: { cacheExclude: [/\\/_[^\\/]+$/], includePaths: [ 'node_modules/bootstrap-sass/assets/stylesheets' ] }, vendorNpmFiles: [ ... 'bootstrap-sass/assets/**/*' ] 

Answer 1

最新版本的angular-cli適用於webpack，它沒有angular-cli-build.js ，所以你可以忽略它，如果你升級。

我也不會禁用視圖封裝。 如果需要全局樣式，請將它們添加到全局樣式表中。 （angular-cli在你的src文件夾中創建一個，通常是一個css文件，所以使用-style=scss標志創建你的應用程序或在angular-cli.json更改它）。

所以，如果你有最新的cli版本，你可以導入bootstrap-sass mixins。 例如在你的app.component.scss ：

// core
@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import '~bootstrap-sass/assets/stylesheets/bootstrap/mixins';
// buttons
@import '~bootstrap-sass/assets/stylesheets/bootstrap/buttons';

為了能夠編譯引導程序，需要“核心”導入。 你可能應該將它們移到自己的mixin中。

如果你還想使用glyphicons，你還必須設置$icon-font-path bootstrap變量相對於它使用的scss文件。（例如$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; ）