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.
Top comments (0)