Bootstrap 4 - Como alterar as CORES da forma certa. 🎨

[@elainedelgado6293]

Que aulão!! Já tinha visto vários tutoriais de como usar Bootstrap com SASS mas não conseguia por em prática! Muito obrigada, fez toda a diferença!!!

[@stilosites439]

Thiago muito obrigado por nos fornecer esse conteúdo de grande valor, pois todos nós te agradecemos muito. Deus que te abençoes e que você continue trazendo mais vídeo para nos ajudar. Muito Obrigado de coração.

[@carlosnani]

Devo ter visto esse vídeo umas 4 vezes, ... até cair a ficha, que diga-se de passagem, explodiu a minha cabeça !! rs.
Como eu gastei tempo desnecessariamente no último projeto que eu fiz. rs
Obrigado pela aula, que me ajudou muito.

[@ThiagoFranchin]

Muito bom né Carlos, depois que eu descobri isso também meu mundo mudou, hehe!!! 😎
Valeu, abraço!!!

[@maiafiho]

Brother obrigado!
Você abriu a minha mente, agora sei que dá para alterar não só as cores mas todo o Bootstrap e criar fronts incríveis.

[@ThiagoFranchin]

Cara é isso mesmo, com a última versão do bootstrap 4.3 o arquivo variables ficou um pouquinho diferente do vídeo, mas a linha de raciocínio é a mesma, basta setar novas configurações e correr para o infinito 🚀...
Se fizer algum layout da hora, deixe o link ai para a gente ver!!!
Obrigado pelo feedback!

[@VictorHugo-mb2eu]

Cara, isso era tudo o que eu precisava, fiquei 3 horas vendo outros vídeos que me deram mais problemas para resolver do que soluções, então muito obrigado mesmo! Agora eu posso finalmente usar ao máximo o Bootstrap para desenvolver meus projetos.

[@villastube]

Muito bom o tuto. Finalmente entendi e consegui que o watch funfasse. Valeu

[@Fernando-du5uj]

Show, obrigado pelo vídeo cara!

[@dreamlandband]

😃 Hace mucho que estaba buscando esto!!! muchas gracias por compartir!!! 🎉

[@KOCKIE1]

Ótimo vídeo, me ajudou muito

[@MatheusJBClaro]

Pra mim, esse é o vídeo mais importante do TH-cam! Amigo, pode nos explicar melhor a diferença de usar npm init e esse processo?

[@rafaelbarros4704]

boa cara, parabéns! me ajudou bastante

[@marcioaraujodelima]

Muito bom!

[@oriumi]

Mano deixa eu ver se entendi, se eu quiser modificar alguma coisa no bootstrap como alguma cor que no caso do vídeo foi o roxo que já tem no proprio bootstrap eu coloco ele antes do @import no scss, mas se eu quiser adicionar uma nova propriedade como o margin-right no button eu coloco depois do @import?

[@ThiagoFranchin]

Sim, é isso mesmo, o que vc coloca antes são as variáveis que vão substituir no bootstrap e dai o css que criar, você coloca depois.
As variáveis são antes porque o arquivo do bootstrap que vem depois ele esta com o '!default' na frente dos valores das variáveis e funções, por esse motivo é possível chamar antes do css e ele ser aplicado.

[@nyx105]

Valeu, seu vídeo me ajudou muito, eu só estou encontrando um problema com as variáveis quando tento alterar outra coisa que não sejam as cores mesmo colocando antes do import, você poderia me dizer se está faltando algo?

[@ThiagoFranchin]

Da uma olhada se a variável que vc esta alterando depende de outra variável.
Uma teste que você pode fazer é copiar o arquivo inteiro _variables.scss, e alterar apenas o que vc quer. Tenta isso, qualquer coisa, chama ae. 👍

[@emehcomp]

+Thiago Franchin cara te amo... hahahahahahahahahahah.

[@nhojunior06]

Os comandos PHP não funcionam no VS. Tenho instalado o Xampp e quando utilizo o "--watch", o VS trava e não completa, sem o mesmo trabalha normal. Tem ideia do que pode ser?

[@jandemasmo9542]

Amigo uma dúvida , para fazer o import você usou o arquivo Bootstrap scss e copiou as variáveis e colou dentro do style.scss correto? Então basicamente eu posso mudar tudo no scss copilar no css mais como fica o import quando finalizar o site e for colocar no ar ?

[@ThiagoFranchin]

Quanto você termina o site e vai subir para o servidor, você apenas sobe o arquivo gerado, por exemplo o style.css.
Todos os outros arquivos do scss são apenas para desenvolvimento, eles não funcionam no servidor, o que funciona é apenas o que ele gera.
Em resumo no servidor só vai funcionar os arquivos puros (html, css, javascript...).
Repare que o comando no terminal que eu uso é:
"node-sass css/style.scss css/style.css"
onde o 'style.scss' é o arquivo de desenvolvimento
e o 'style.css' é o arquivo gerado que você vai subir para o servidor e chamar no header do seu arquivo html
Arquivo HTML:

Se tiver dúvida ainda só avisar!!! 🖖

[@jandemasmo9542]

@@ThiagoFranchin opa obrigado pela resposta mano, te agradeço muito, entedi perfeitamente, a unica divida que ainda tenho é a seguinte, quando fazemos o @import do scss para o css, usando no caso alteração ou inclusao de novas cores, como voce fez no video, acontece que quando tiramos o import as alterações feitas no scss dão erro no css. tipo , para exemplificar criei essa paleta de cores no style.scss , como ficaria a questão do import quando eu finalizasse o projeto, descupa se minha perguta parece idiota é que estou quebrando cabeça para aprender a usar o bootstrap e fazer as alterações ao meu gosto da forma correta.
//minha paleta de cores
$my-color1:#D5A021;
$my-color2:#A49694;
$my-color3:#618985;
$my-color4:#000000;
$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
(
"my-color1": $my-color1,
"my-color2": $my-color2,
"my-color3": $my-color3,
"my-color4": $my-color4
),
$theme-colors
);
//importando bootstrap
@import '../../node_modules/bootstrap/scss/bootstrap';

[@wesley5171]

é necessario o comando npm init? se sim, pq?

[@ThiagoFranchin]

O npm init vc roda apenas na primeira vez. Ele cria o arquivo package.json, nele existe várias configurações, como por exemplo os pacotes que o seu sistema depende para funcionar.

[@wesley5171]

@@ThiagoFranchin opa, valeu pela resposta. Obrigado.

[@MatheusJBClaro]

​@@ThiagoFranchin amigo, poderia explicar melhor a diferença do npm init e da forma que vc trabalha? obrigado!!

[@playkill51]

Boa noite mano! Queria saber se é normal mesmo no arquivo style.min.css ele estar gerando um código gigantesco, maior do que o style.css, parece que nesse min também é adicionado todas as mudanças de bootstrap, é isso mesmo?

[@ThiagoFranchin]

Fala PlayKill, o arquivo .min.css assim como o arquivo .css vão ter o mesmo código, que é todo o Bootstrap, é tudo mesmo em um único arquivo, a diferença entre eles é que no .min.css são removidos todos os espaços, isso é feito para diminuir o tamanho do arquivo em kbytes para que seja carregado mais rapidamente pelos browsers.
Caso não seja esse o caso, um dos arquivos não deve estar sendo compilado corretamente.

[@playkill51]

@@ThiagoFranchin Poxa eu entendo. É que no meu arquivo min aqui tem muiiito mais código que o meu style, tem umas definições de style do root lá nesse min... E assim, já iniciei o desenvolvimento do meu site, eu posso excluir esse meu arquivo style.min.css e tentar compilar novamente?

[@ellobisonho5279]

Vc é foda!!!1

[@JosiasCtba]

Não gosto dessas classes danger e warning. Posso removê-las e criar as minhas próprias né?

[@ThiagoFranchin]

Não vejo a necessidade de remove-las, o ideal é altera-las ou não usar-las, você pode dizer que a classe danger por exemplo é roxa ao invés de vermelha, então todos os componentes do bootstrap com a classe danger, exemplo: .text-danger, .bg-danger, .btn-danger, se tornaram roxas, assim como ensino no vídeo.

[@conteudoanimal]

havemos videos .... !!!

[@victorribeiro9424]

Olá, Thiago. Tudo bem?
É possível alterar as cores utilizando o css direto? Sem utilizar SaSS e Git?
Forte abraço.

[@ThiagoFranchin]

É sim, porem vai ser mais trabalhoso, pois por exemplo, para você alterar a cor de um botão, será necessário trocar seu background em todos os estados, normal, hover e active, depois fazer o mesmo com suas bordas, além disso seu código css ficará mais extenso pois você estará sobrepondo algo que já existe setado no bootstrap, mas da sim :)

[@alissongomes6310]

É possível aplicar o comando em mais de um arquivo .scss ao mesmo tempo? Se sim como?

[@ThiagoFranchin]

É possível sim, basta colocar para ele compilar a pasta e não o arquivo .scss.
Outra coisa é que os arquivos que tiverem o _ (underline) na frente do nome, não serão compilados.
Exemplo:
_card.scss = não será compilado, por isso vc pode importar ele dentro de outros arquivos .scss.
card.scss = vai ser compilado e gerado um aquivo css.

[@alissongomes6310]

@@ThiagoFranchin usei 'node-sass -o css css --output-style compressed' mas não consigo alterar o sufixo dos meus arquivos para '.min.css'

[@jeanmorelli1588]

meu source control do vscode ta com mais de 5000 changes, nao consigo entender o porque disso e como eu limpo tudo aquilo?

[@ThiagoFranchin]

Siga esses passos para deletar:
github.com/Microsoft/vscode/issues/32459
Abraço !!!

[@marciocarvalho8081]

posso ir no arquivo direto e alterar diretamente sem ser preciso baixar e fazer esse processo todo

[@ThiagoFranchin]

Funciona, mas o problema de fazer isso é que o arquivo _variables.scss do bootstrap esta dentro da pasta ./node_modules e essa pasta a gente NÃO costuma comitar nos projetos, ela sempre esta configurada para ser ignorada no arquivo .gitignore. Outra coisa é que quando você tentar atualizar o bootstrap você vai perder todas as configurações pois o arquivo vai ser substituído por um da versão mais nova.

[@marciocarvalho8081]

@@ThiagoFranchin show de bola entendi