我正在尝试将Twitter Bootstrap与Angular 2，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，所以角2不适影子DOM仿真和引导CSS适用于整个应用程序

    @Component({
       encapsulation: ViewEncapsulation.None
    })
   

3. 在中加入以下代码块angular-cli-build.js，以便相对代码@import可以正常工作

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