如何包括在Angular2的WebPack入门套件

从基本的WebPack起动的angular2引导混入，我已经在NG2，自举简单的包含在index.html的补充道：如何包括在Angular2的WebPack入门套件

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

而且在我的应用程序.module.ts我加了：

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

然后我看到一个漂亮的日期选择加入的

<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>

一个HTML片段到我的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加入到构建中。非常感谢您的帮助。

来源

2016-12-29 JoelParke

在ordet使用引导程序混控你的SCSS文件

1 - 你需要引导安装

npm install bootstrap

2-里面你需要包括混入文件在你的SCSS文件

里面你scss文件：

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

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

来源

2016-12-29 21:11:16 Milad

非常感谢！最后我需要更多一点： '@import'〜bootstrap/scss/_mixins'; @import'〜bootstrap/scss/_variables'; @import'〜bootstrap/scss/_utilities';' – JoelParke

@JoelParke，好的，我会更新答案，然后 – Milad

如何包括在Angular2的WebPack入门套件

回答

相关问题