twitter bootstrap - Angular2: ¿Cómo usar bootstrap-sass con @extend y mixins en Angular-CLI?

twitter-bootstrap

Question

Estoy tratando de usar Twitter Bootstrap con Angular 2, SCSS y el andamio generado por angular-cli

Quiero aplicar la mejor práctica para no ensuciar mi marca con clases de CSS específicas de Bootstrap. En su lugar, quiero aplicarlos / usarlos a través de @extend o como mixins:

.mybutton {
   @extend .btn;
}

Mi problema:

• El compilador SASS .btn un error, porque no sabe acerca de .btn
• Si agrego @import "bootstrap"; a mi .scss , mostrará el .scss Bootstrap-CSS completo en cada componente css

Lo que he hecho hasta ahora

1. añadir @import "bootstrap"; a mi app.component.scss

2. Aplique ViewEncapsulation.None al AppComponent , por lo que Angular 2 no aplica la emulación Shadow DOM y el CSS de Bootstrap se aplica a toda la aplicación

    @Component({
       encapsulation: ViewEncapsulation.None
    })

3. Incluya el siguiente bloque en angular-cli-build.js , por lo que la función relativa de @import funcionará

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

Answer 1

La versión más reciente de angular-cli funciona con webpack, y no tiene angular-cli-build.js , por lo que puede descartarlo si lo actualiza.

Tampoco me gustaría desactivar la encapsulación de vista. Si necesita estilos globales, agréguelos a una hoja de estilo global. (angular-cli crea uno en su carpeta src, normalmente es un archivo css, así que cree su aplicación con el indicador -style=scss o cámbielo en su angular-cli.json ).

Por lo tanto, si tiene la versión más reciente de cli, solo puede importar los mixins bootstrap-sass. Por ejemplo, en su 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'';

Las importaciones ''centrales'' son necesarias para que Sass pueda compilar su bootstrap. Probablemente deberías mover estos a su propia mezcla.

Si también desea usar glyphicons, también debe configurar la variable bootstrap $icon-font-path relativa al archivo scss usado en el que se usa. (Por ejemplo, $icon-font-path: ''../node_modules/bootstrap-sass/assets/fonts/bootstrap/''; )