Bootstrap é o framework CSS/JS mais popular entre desenvolvedores web. Bootstrap possui uma série de cores padrão que podem ser chamadas por classes, como por exemplo, primary, secondary, dentre outras.

Entretanto, caso você queira alterar o tom das cores padrão, você teria que alterar manualmente cada classe do arquivo CSS, o que poderia levar muito tempo.
Saiba que existe uma forma simples de alterar isso. Podemos alterar essas cores compilando o Bootstrap usando SASS.
Neste artigo, apresento um breve relato de como alterar os padrões de cores usando SASS e NPM (node.js).
Primeiros passos: criando o projeto node
Para isso iremos precisar no node.js.
Vamos começar iniciando um projeto node. No terminal ou PowerShell, execute:
npm init
Instalando Bootstrap
A seguir, vamos instalar o Bootstrap:
npm install bootstrap
Instalando SASS
A seguir vamos instalar o SASS:
npm install -g sass

Alterando a cor primária
Digamos que temos uma página HTML bastante simples com um único botão.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<button class="btn btn-primary">Este é um botão</button>
</body>
</html>
Digamos que desejamos alterar o tom de azul usado pelas classes primary. Para isso, vamos abrir o arquivo _variables.scss que está disponível na pasta scss.

Podemos alterar o tom padrão das classes primary, mudando a variável $blue
. Por exemplo, vamos usar um azul mais escuro e menos saturado:

Agora vamos compilar o arquivo e gerar um novo arquivo CSS. No terminal/PowerShell, execute o código:
sass --watch .\node_modules\bootstrap\scss:.\node_modules\bootstrap\comp
Esse código recebe duas informações importantes:
sass --watch pasta_com_arquivos_css:nome_pasta_saída
A medida que você altera o arquivo _variables.scss, o terminal irá registrar as alterações e realizar uma nova compilação dos arquivos CSS.

Agora vamos alterar o index.html para que ele aponte para o novo arquivo css criado.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/bootstrap/comp/bootstrap.css">
</head>
<body>
<button class="btn btn-primary">Este é um botão</button>
</body>
</html>
Veja o resultado final:

Perceba que isso é válido para qualquer classe que utilize a expressão primary:


4 respostas em “Compilando o Bootstrap com SASS e NPM”
[…] Personalizando o Bootstrap com SASS […]
[…] Personalizando o Bootstrap com SASS […]
[…] Personalizando o Bootstrap com SASS […]
[…] Personalizando o Bootstrap com SASS […]