Как включить загрузочные миксины в стартовый комплект веб-пакета Angular2

Из базового webpack-starter для angular2 я добавил 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';

И затем я вижу хороший Datepicker, добавляя 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, я немного не знаю, как добавить эти миксины в сборку. Ваша помощь очень ценится.


webpack angular ng2-bootstrap
person JoelParke    schedule 29.12.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Чтобы использовать загрузочные миксы внутри ваших файлов 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
person Milad    schedule 29.12.2016
comment
Большое спасибо! В конце концов мне нужно было немного больше: @import '~bootstrap/scss/_mixins'; @import '~bootstrap/scss/_variables'; @import '~bootstrap/scss/_utilities'; - person JoelParke; 30.12.2016