BOOTSTRAP - Alterando suas variáveis.

Partindo do pressuposto de que já tenha instalado o node_modules utilizaremos os seguintes comandos no terminal:

sass --watch node_modules/bootstrap/scss:node_modules/bootstrap/dist/css

Após feita a compilação, qualquer modificação pode ser feita nas variaveis sccs do bootstrap, desde as cores até o padding de certo elemento.

PS:

  • Após fazer a alteração de um Ctrl+S para salvar e compilar o sass.
  • Use Ctrl+F no vscode para pesquisar dentro da pasta variáveis.
  • Obeserve o caminho que seus arquivos estão, caso contrário a compilação pode falhar.

Outra forma é usando o @imports e alterando a variável no próprio arquivo scss

// Variáveis devem ser escritas primeiro $primary: #900; $enable-shadows: true; $prefix: "mo-";

// Abaixo vem o import @import "../node_modules/bootstrap/scss/bootstrap";

ygorchhá 2 anos

Massa demais, Anderson!

Esses dias bati muita cabeça tentando customizar as variáveis do Bootstrap e isso ajuda e muito para evitar refação.

Uma das coisas que acabei percebendo, pelo menos usando o Webpack, é que o import funciona diretamente declarando apenas o bootstrap no import, ficando assim:

$primary: #900;

@import "bootstrap";