Adicionando Boostrap 5 em um projeto Phoenix

Olá, pessoas!

Normalmente quando se fala de aplicação phoenix, se fala também de tailwindcss, mas nem todo mundo tem familiaridade com o tailwindcss. Por outro lado, existem muitas aplicações web que usam o bootstrap. 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á semelhante ao 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 pelo terminal na pasta do seu projeto e após isso, renomear o arquivo assets/css/app.css para assets/css/app.scss e apagar todo o conteúdo do arquivo e adicionar o código

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

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

import "bootstrap"

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