La respuesta aceptada ya no funciona. Si es como yo, es un nuevo usuario de angular que intenta agregar bootstrap a su proyecto y sigue la wiki de angular-cli aquí: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap (como pegado en la respuesta aceptada).

El problema se discute aquí: https://github.com/twbs/bootstrap/issues/23112

Versión corta: los colores del tema ahora están en un objeto anidado, por lo que ya no se aplican cosas como $brand-primary ; ahora debemos cambiar $theme-colors . Funciona, pero ahora tenemos que reemplazar todo el objeto incluso si solo queremos editar una variable.

 $gray-100: #f8f9fa; $gray-600: #868e96; $gray-800: #343a40; $red: #dc3545; $yellow: #ffc107; $green: #006600; // This is the only variable I wanted to change $cyan: #17a2b8; $theme-colors: ( primary: $green, secondary: $gray-600, success: $green, info: $cyan, warning: $yellow, danger: $red, light: $gray-100, dark: $gray-800 );

Las historias de Angular CLI dan una respuesta en https://github.com/angular/angular-cli/wiki/stories-include-bootstrap que resumiré a continuación. Tenga en cuenta que todavía tengo que descubrir cómo interactúa esto con ng-bootstrap .

Crear un proyecto:

 ng new my-app --style=scss cd my-app

Instale Bootstrap 4:

 npm install bootstrap@next --save

Configuración del proyecto

Cree un archivo vacío _variables.scss en src/ que es donde irán sus modificaciones de estilo.

En styles.scss agregue lo siguiente:

 @import 'variables'; @import '../node_modules/bootstrap/scss/bootstrap';

Proyecto de prueba

Abra app.component.html y agregue el siguiente marcado:

 <button class="btn btn-primary">Test Button</button>

Con la aplicación configurada, ejecute ng serve para ejecutar su aplicación en modo de desarrollo. En su navegador, navegue hasta la aplicación localhost:4200 .

Verifique que aparezca el botón de estilo bootstrap. Para asegurarse de que sus variables se utilicen, abra _variables.scss y agregue lo siguiente:

 $brand-primary: red;

Regrese al navegador para ver el color de la fuente cambiado.

Me tomó un tiempo resolverlo, así que, con la esperanza de que ayude a alguien, estos son los pasos que tomé para crear mi propio estilo personalizado que anula ng-bootstrap .

1. Cree un proyecto Angular usando scss para el estilo (¡no .sass!)
2. Instale ng-bootstrap usando ng add como se detalla en la sección de instalación (no npm install ).

Esto agregó una línea en mi archivo styles.scss así:

 /* Importing Bootstrap SCSS file. */ @import '~bootstrap/scss/bootstrap';

3. Desde aquí, podía agregar propiedades sobre @import , lo que significaba que podía cambiar el tema según lo deseara.

En cuanto a encontrar las variables para anular, primero las encontré usando save from boostrap magic , pero se pueden encontrar directamente en node_modules\bootstrap\scss\_variables.scss

Ejemplo de estilos de styles.scss con anulación del color primario:

 /* You can add global styles to this file, and also import other style files */ $primaryColor: hotpink; $theme-colors: (primary: $primaryColor); /* Importing Bootstrap SCSS file. */ @import '~bootstrap/scss/bootstrap';