Twitter bootstrap Angular2：如何在AngularCLI中将引导sass与@extend和mixin一起使用？

我正在尝试将Twitter引导与Angular 2、SCS和Angular cli生成的scaffold一起使用

我希望应用最佳实践，不要将标记与特定于引导的CSS类混在一起。相反，我希望通过@extend或作为mixin应用/使用它们：

.mybutton {
   @extend .btn;
}

我的问题是：

• SASS编译器抛出错误，因为它不知道

  .btn

• 如果我添加

  @import“bootstrap”

  到我的

  .scss

  -文件，它将在每个CSS组件中呈现完整的引导CSS

到目前为止我做了什么

添加

@import“bootstrap”到我的
应用组件.scss

将

ViewEncapsulation.None

应用于

AppComponent

，因此Angular 2不应用阴影DOM仿真，引导CSS应用于整个应用程序

 @Component({
    encapsulation: ViewEncapsulation.None
 })

在

angular cli build.js

中包含以下块，这样相对

@import

就可以工作了

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

---

angular cli的最新版本可与webpack一起使用，并且它没有

angular cli build.js

，因此，如果升级，您可以忽略这一点

我也不会禁用视图封装。如果需要全局样式，请将它们添加到全局样式表中。（angular cli在您的src文件夹中创建一个，通常是一个css文件，因此使用

-style=scss

标志创建您的应用程序，或者在

angular cli.json

中更改它）

因此，如果您有最新的cli版本，那么只需导入引导sass mixin即可。例如，在您的

应用程序组件.scss

中：

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

sass需要“核心”导入才能编译引导。你可能应该把它们移到自己的混合器里

---

如果您还想使用glyphicons，您还必须设置与所用scss文件相关的

$icon font path

引导变量。（例如，

$icon font path:“../node_modules/bootstrap sass/assets/fonts/bootstrap/”；

）

问题是，您只能在全局scss文件中使用混合，而不能在组件的scss文件中使用混合。请看，您可以在每个scss文件中使用mixin，但必须在每个文件中添加所需的引用。就像每个组件都有自己的“全局”scss文件，该文件被转换为CSS。这并不能满足原始海报不需要将每个组件的样式注入页面一次的需求。如果他想在某个页面的X个组件中的每个组件上使用@extend（比如按钮），那么css将在页面上导入X次，并且每个组件都覆盖另一个组件。这是一个糟糕的解决方案，但在angularCLI/Webpack做出更好的解决方案之前，似乎无法改进。您是对的，它不是一个理想的解决方案。这仍然是解决老年退休金问题的唯一有效办法。在我的回答中，我还指出了使用全局样式表的可能性，这是在使用类似bootstrap的整块css库时应该做的。Angular还允许您为单个组件导入多个样式表，因此您可以为使用按钮的所有组件创建例如button.scss样式表。当你不能提供更好的东西时，请不要说这很糟糕。