cómo configurar bootstrap 4 scss con reaccionar webpack

Juliana, parte de este gran equipo, nos ha hecho el favor de crear este tutorial porque conoce muy bien este tema.

Solución:

En primer lugar, debe descargar el cargador adecuado para scss

Instalar sass-cargador

npm install sass-loader --save-dev

Luego, debe configurar su paquete web para probar todos los archivos scss para que pueda manejarlo. Aqui esta como se hace

test: /.scss$/, loaders: [ 'style', 'css', 'sass' ]

Si tienes un error con respecto a node-sass

Si tiene un error como no puede resolver node-sass, instálelo

npm i node-sass --save-dev

Ahora, si importa bootstrap.scss, el paquete web lo empaquetará por usted

import "bootstrap/scss/bootstrap.scss"

como personalizarlo

Ejemplo en su propio archivo scss

$btn-font-weight:bold;

y luego importe el componente que desea anular o todo el archivo bootstrap.scss

@import '~bootstrap/scss/bootstrap.scss';

En mi caso estilo.scss

$btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';

principal.js

import "bootstrap/scss/bootstrap.scss"
import "./style.scss"

¡Espero que esto te ayude a lograr tu objetivo!

He creado una aplicación de demostración aquí

correr npm install
y npm start
tengo que localhost:8080

Parece que el repetitivo no usa sass-loader y no busca .scss archivos

Así que primero instala npm i sass-loader --save

Luego, debajo de la parte de los cargadores en la configuración del paquete web, debe agregar algo como esto:

webpack.config.js

var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = 
    // ...
    loaders: [
        // ...
        
            test: /.(css
    ]
    // ...
;

Ahora, si quieres jugar con Bootstrap .scss variables, puede hacerlo así:

styles/app.scss

$brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';

y en tu main.js poner en la importación de estilo

import "styles/app.scss";

Además, debo mencionar que esto parece muy cercano a esta respuesta.

Ahora que cambió a react-slingshot con el paquete web ya configurado para sass, hay algunos pasos menos. Desde el modelo básico, agregue bootstrap 4 con npm como ya lo hizo:

npm install [email protected] --save

Luego, en src/styles/styles.scss, desea agregar un par de importaciones

@import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";

Esto es esencialmente lo mismo que @DanielDubovski le muestra, pero es un poco más convencional tener un archivo separado de anulaciones de arranque, y ya no necesita el valor predeterminado, ya que está planeando anular los valores predeterminados de arranque y probablemente no lo necesite. desea anular accidentalmente sus colores de arranque personalizados. Para comenzar con src/styles/bootstrap-custom.scss, puede ingresar a node_modules/bootstrap/scss/_variables.scss y ver una lista completa de las variables predeterminadas. A continuación, puede copiar los nombres de las variables que desea actualizar. Aquí hay un ejemplo de bootstrap-custom.scss que simplemente anula los colores de la escala de grises:

/*
 * overrides for bootstrap defaults, you can add more here as needed,    see node_modules/bootstrap/scss/_variables.scss for a complete list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;

Comentarios y valoraciones

Recuerda que puedes permitirte decir si hallaste tu obstáculo a tiempo.

---

---

Utiliza Nuestro Buscador