如何包括在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入門套件

回答

相關問題