Como todos sabemos, tenemos que anular el estilo Bootstrap para darle un nuevo aspecto a nuestro sitio web. De lo contrario, se verá común al anular, podemos cambiar su tema predeterminado: fondo, fuentes, colores, espaciado, etc. variables. Entonces, aquí tenemos que anular las variables de Bootstrap predeterminadas (ya que las variables son responsables de la salida). Para hacerlo, necesitamos bootstrap localmente para hacerlo. Necesitamos el código fuente sin procesar detrás del arranque del código SASS y podemos obtenerlo fácilmente instalándolo como una dependencia local usando NPM (administrador de paquetes de Nodes) y lo obtiene automáticamente al instalar Nodejs. Ahora simplemente siga los pasos que se indican a continuación para sobrescribir:
-
Paso 1: Vaya a su proyecto y abra su terminal o línea de comando y luego escriba comando. Básicamente, este comando pone este proyecto bajo el control de npm.
$npm init -y
-
Paso 2: Instale módulos/paquetes usando el comando. Después de esto, verá una nueva carpeta llamada node_modules y dentro de esa carpeta, habrá una carpeta de arranque y dentro de ella, verá una carpeta llamada SASS.
$npm install bootstrap--save
Ahora NO haga los cambios en esa carpeta SASS porque eso no funcionará ya que su programa no será compilado o editado aquí no afectará el código CSS compilado y terminado y además, no toque esto porque si alguna vez necesita para reinstalar su proyecto y reinstalar esa dependencia, entonces sobrescribirá sus cambios. Entonces, para abordar esto, seguimos el siguiente paso.
-
Paso 3: crea tu propio archivo sass personalizado. hagamos un archivo llamado main.scss. Luego importe todos los archivos scss de arranque en su archivo main.scss usando el comando
@import "node_modules/bootstrap/scss/bootstrap";
ahora desde su terminal escriba el comando para ejecutar su archivo.
$sass main.scss main.css;
Ahora, esto le dará su archivo main.css, que ahora es mucho más grande porque ahora incluye todo el paquete de arranque. Ahora puede eliminar sus antiguas etiquetas de arranque de CDN de su archivo index.html.
-
Paso 4: ahora puede simplemente sobrescribir sus valores predeterminados en el archivo main.scss, todo lo que tiene que hacer es escribir comandos como
$theme-colors: ( "primary": #521751, "danger": #b80c03 );
Al anular archivos Sass, sus anulaciones deben realizarse antes de importar los archivos Sass de Bootstrap. Entonces, tenemos que escribir código arriba de nuestro
@import "node_modules/bootstrap/scss/bootstrap";
Ahora, cuando escribimos nuestro código sobre nuestro archivo Bootstrap Sass importado, podemos volver a ejecutarlo. Y una vez que esto termine, podrás ver los cambios.
$sass main.scss main.css;
Ejemplo: instalé node -modules/packages y creé mi propio archivo main.scss ahora dejo el código a continuación como nuestro código principal dice index.html.
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/> </head> <body> <button type="submit" class="btn btn-primary">Submit</button> </body> </html> </html>
Como hemos incluido valores de arranque en él, después de aplicar cambios en nuestro archivo main.scss que se reflejarán en nuestro resultado final
main.scss
$theme-colors: ( "primary": #521751, "danger": #b80c03 ); @import "node_modules/bootstrap/scss/bootstrap";
Producción:
-
Antes de realizar cambios en main.scss:
-
Después de hacer cambios y volver a ejecutar:
$sass main.scss main.css;
