Como instalar bootstrap via webpack na sua aplicação rails 6.
Aprenda a como instalar o bootstrap via yarn em vez de utilizar a gem.
![Como instalar bootstrap via webpack na sua aplicação rails 6.](/assets/images/bootstrap-instalacao.jpg)
O Rails 6 trás o webpack como o compilador padrão de Javascript! Pra quem não conhece, o webpack é uma gem que permite uma fácil integração do pré-processor de JavaScript e do bundler do Rails.
Eu particularmente acho mais fácil e melhor instalar o bootstrap via webpack. Abaixo eu coloquei um passo a passo simples de ser seguido onde você consegue utilizar tudo o que o bootstrap pode oferecer na sua aplicação.
Tendo em vista que o seu projeto está só no ponto de implementar o bootstrap, o primeiro comando a ser rodado deverá ser:
yarn add bootstrap jquery popper.js
Logo em seguida, para garantir que irá instalar tudo o que foi adicionado, você deve rodar no seu terminal:
rails webpacker:install
Após rodar o comando acima, o seu package.json deve parecer com algo do tipo:
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"bootstrap": "4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"turbolinks": "^5.2.0"
}
Após a instalação via webpack, você deve adicionar as seguintes linhas no seu app/assets/stylesheets/application.css:
*= require bootstrap
*= require_tree .
*= require_self
E com isso, você já está pronto para user o bootstrap na sua aplicação! Se quiser testar, você pode adicionar o código abaixo na sua view:
<span class="badge badge-pill badge-primary">Botão primário</span>
Se aparecer um badge, de cor azul, com o nome “Botão primário”, a instalação deu certo, agora é só aproveitar :)