Question

从angular2的基础webpack-starter中，我添加了ng2-boostrap，只需在index.html中包含：

  <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片段看到一个不错的Datepicker

    <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带来新东西，我对如何将这些mixins添加到构建中感到有点无能为力。非常感谢您的帮助。

Answer 1

在orsst中使用scss文件中的bootstrap混音

1-你需要安装bootstrap

  npm install bootstrap

2-你需要在你的scss文件中包含mixin文件

在你的scss文件中

：

@import '~bootstrap/scss/_variables'
@import '~bootstrap/scss/_utilities'
@import '~bootstrap/scss/mixins/_buttons';

@include button-variant(); // use it

如何在Angular2 webpack入门套件中包含bootstrap mixins

1 个答案: