如何在 Angular2 webpack 初学者工具包中包含 bootstrap mixins

Question

从 angular2 的基本 webpack-starter，我通过简单地包含在 index.html 中添加了 ng2-boostrap：

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

并且在我的 app.module.ts 中添加了一个：

import { AlertModule, DatepickerModule } from 'ng2-bootstrap';

然后我通过添加

的 html 片段看到了一个不错的日期选择器

    <alert type="info">Hello from ng2-bootstrap  {{ date.toDateString() }}</alert>
<div style="display:inline-block; min-height:290px;">
  <datepicker [(ngModel)]="date" showWeeks="true"></datepicker>
</div>

给我的 home.component.html。一切看起来都很棒。

但后来我创建了另一个组件，一切都很好，直到我尝试添加更多的 scss：

    .btn-facebook {
      @include button-variant($btnText, $btnFacebookBackgroundHighlight, $btnFacebookBackgroundHighlight);
    }
    .btn-twitter {
      @include button-variant($btnText, $btnTwitterBackground, $btnTwitterBackgroundHighlight);
    }
    .btn-google-plus {
      @include button-variant($btnText, $btnGooglePlusBackground, $btnGooglePlusBackgroundHighlight);
    }
    .btn-github {
      @include button-variant($btnTextAlt, $btnGithubBackground, $btnGithubBackgroundHighlight);
    }

我立即看到：

Module build failed: 
@include button-variant($btnText, $btnFacebookBackgroundHighlight, $btnFacebookBackgroundHighlight);
      ^
  No mixin named button-variant

作为 webpack 和 angular2 的新手，我有点不知道如何将这些 mixin 添加到构建中。非常感谢您的帮助。

Answer 1

为了在 .scss 文件中使用 bootstrap mixins：

您需要安装 bootstrap。

npm install bootstrap

您需要在 .scss 文件中包含 mixins 文件。在您的 .scss 文件中：

@import '~bootstrap/scss/_variables'
@import '~bootstrap/scss/_utilities'
@import '~bootstrap/scss/mixins/_buttons';
    
@include button-variant(); // use it

如何在 Angular2 webpack 初学者工具包中包含 bootstrap mixins

How to include bootstrap mixins in a Angular2 webpack starter kit

webpack

ng2-bootstrap

angular