PT-BR - Adicionando bootstrap 5 no projeto phoenix

Normalmente quando se fala de aplicação phoenix, se fala também de tailwindcss, mas nem todo mundo tem familiaridade com o tailwindcss e precisa de algo mais rápido para entregar.

Já o bootstrap ainda continua sendo bastante utilizado em aplicações web. Então a ideia desse tutorial é demostrar como aplicar o bootstrap nas suas aplicações phoenix de maneira rápida.

Para utilizarmos o boostrap, faremos a utilização da lib dart_sass que é um instalador e “executor” para sass.

Então vamos lá… No seu arquivo mix.exs na função privada deps, adicione a seguinte linha:

{:dart_sass, "~> 0.5.1"}

No arquivo config/config.exs adicione o código para adicionar as configurações do dart_sass:

config :dart_sass,
  version: "1.43.1",
  default: [
    args: ~w(css/app.scss ../priv/static/assets/app.css),
    cd: Path.expand("../assets", __DIR__)
  ]

Na parte de watchers no arquivo config/dev.exs iremos adicionar o seguinte código para que nossa aplicação phoenix possa assistir os arquivos sass:

sass: {
      DartSass,
      :install_and_run,
      [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
    }

Também no arquivo mix.exs iremos alterar os aliases. Na parte chamada assets.deploy iremos adicionar o código "sass default --no-source-map --style=compressed" onde ficará parecido com o código abaixo:

"assets.deploy": ["esbuild default --minify", "sass default --no-source-map --style=compressed", "phx.digest"]

Para finalizar, faremos mais três alterações na pasta assets. A primeira é rodar o comando npm install boostrap --prefix assets e após isso, renomear o arquivo assets/css/app.css para assets/css/app.scss e iremos apagar todo o conteúdo do arquivo e adicionar o código

@import "../node_modules/bootstrap/scss/bootstrap";

E por fim, iremos remover o código import "../css/app.css" do arquivo assets/js/app.js e adicionar o código

import "bootstrap"

Agora você pode subir a aplicação e ver que toda a sua tela inicial foi alterada.