Angular2: Как использовать bootstrap-sass с @extend и mixins в Angular -CLI?

Я пытаюсь использовать Twitter Bootstrap с Angular 2, SCSS и эшафот, сгенерированный angular -cli

Я хочу применить наилучшую практику, чтобы не портить мою разметку с помощью классов CSS, специфичных для Bootstrap. Вместо этого я хочу применять/использовать их через @extend или как mixins:

.mybutton {
   @extend .btn;
}

Моя проблема:

  • Компилятор SASS выдает ошибку, потому что он не знает о .btn
  • Если я добавлю @import "bootstrap"; в мой .scss -File, он отобразит полный Bootstrap-CSS в каждом компоненте css

Что я сделал до сих пор

  • добавить @import "bootstrap"; в мой app.component.scss

  • Примените ViewEncapsulation.None к AppComponent, поэтому Angular 2 не применяет эмуляцию Shadow DOM, а CSS Bootstrap применяется ко всему приложению

     @Component({
    encapsulation: ViewEncapsulation.None
 })

  • Включите следующий блок в angular-cli-build.js, поэтому относительный @import будет работать

    sassCompiler: {
  cacheExclude: [/\/_[^\/]+$/],
  includePaths: [ 'node_modules/bootstrap-sass/assets/stylesheets' ]
},
vendorNpmFiles: [
    ...
    'bootstrap-sass/assets/**/*'           
]

Ответы

Ответ 1

Самая новая версия angular -cli работает с webpack, и она не имеет angular-cli-build.js, поэтому вы можете отклонить это, если будете обновлены.

Я бы также не отключил инкапсуляцию вида. Если вам нужны глобальные стили, добавьте их в общую таблицу стилей. (angular -cli создает одно в вашей папке src, обычно это файл css, поэтому создайте приложение с помощью флага -style=scss или измените его на angular-cli.json).

Итак, если у вас есть новая версия cli, вы можете просто импортировать бутстрап-sass mixins. Например, в app.component.scss:

// core
@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import '~bootstrap-sass/assets/stylesheets/bootstrap/mixins';
// buttons
@import '~bootstrap-sass/assets/stylesheets/bootstrap/buttons';

Импорт "core" необходим, чтобы sass смог скомпилировать ваш загрузочный файл. Вероятно, вы должны переместить их в свой собственный mixin.

Если вы также хотите использовать глификоны, вам также нужно установить переменную boottrap $icon-font-path относительно используемого файла scss, в котором он используется. (например, $icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';)