¿Cómo personalizar las variables SCSS de Bootstrap 4 usando angular-cli y ng-bootstrap?

Haz todo lo posible por interpretar el código bien antes de utilizarlo a tu proyecto si ttienes algo que aportar puedes comentarlo.

Solución:

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 cosas como $marca-principal ya no aplica – ahora debemos cambiar $tema-colores. 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 [email protected] --save

Configuración del proyecto

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

En styles.scss agrega lo siguiente:

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

Proyecto de prueba

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

Test Button

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

Verifique que aparezca el botón de estilo bootstrap. Para asegurarse de que sus variables se utilicen abiertas _variables.scss y agrega 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 por el estilo (¡no .sass!)
2. Instalar 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 styles.scss archivo así:

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

3. Desde aquí, podría agregar propiedades por encima de la @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 un guardado de magia boostrap, pero se podían encontrar directamente en node_modulesbootstrapscss_variables.scss

Ejemplo de trabajo styles.scss con anulación para el 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';

Sección de Reseñas y Valoraciones

Si piensas que ha resultado útil este artículo, sería de mucha ayuda si lo compartes con otros desarrolladores así nos ayudas a extender esta información.

---

---

Utiliza Nuestro Buscador