Como implementar Bootstrap 5 no Laravel Mix
Chegou a versão 5 do Bootstrap e há muitas formas de integrar esta famosa library com Laravel. A mais simples é usar directamente os ficheiros via CDN, mas isto não te dará grandes possibilidades de customização no uso da API Bootstrap 5.
Existe também a possibilidade de configurares o Bootstrap usando o WebPack, mas na minha opinião é complicar, pois as probabilidades de ocorrerem erros durante a configuração aumenta e não se torna fácil para quem não tem grande experiência no uso do WebPack.
Decidi então mostrar como configurar o Bootstrap 5 com o Laravel Mix, que é um pequeno invólucro construído em torno do WebPack e atende perfeitamente as minhas necessidades, mesmo com projetos de grande porte.
Segue então o paso a passo que eu usei para a implementação do Bootstrap 5 no Laravel Mix:
Vamos partir do principio que tens uma instalação nova de um projecto Laravel.
De seguida vamos instalar o Botstrap 5 através do seguinte comando:
npm install bootstrap@next @popperjs/core --save-devNota: Bootstrap v5 já não depende do jQuery. Se não vai usar as funcionalidades javascript do Bootstrap e vai apenas usar os seus estilos, não se preocupe com a instalação do Popper.js.
Vamos agora instalar o Laravel Mix como dependência do Node:
npm install laravel-mix --save-devVamos agora ao ficheiro webpack.mix.js e colocar o seguinte código:
Vamos agora importar o ficheiro JS e o SCSS
No seu projecto deverá encontrar os seguintes ficheiros (caso contrário deverá criá-los):
No ficheiro bootstrap.js deverá inserir a seguinte linha de código:
Por sua vez no ficheiro app.scss deverá introduzir a seguinte entrada:
Perfeito!!!
Agora para podermos usar devemos importar nos nossos ficheiros HTML o js e o scss compilados, para tel devemos em primeiro lugar correr o seguinte comando:
npx mixDeverá agora encontrar na pasta public do seu projecto os seguinte ficheiros:
Agora vamos criar o nosso ficheiro blade. Para efeitos de teste podemos simplesmente ir até ao ficheiro welcome.blade.php, apagar todo o seu conteúdo e colar o seguinte código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="{{ asset('dist/css/app.css') }}" rel="stylesheet">
</head>
<body class="py-5">
<div class="container">
<!-- Simple Bootstrap Alert-->
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('dist/js/app.js') }}" type="text/javascript"></script>
</body>
</html>Inclui a livraria CSS e JS do Bootstrap na página HTML e incluí também uma mensagem de alerta simples e uma modal de teste, ambas estilizadas com o Bootstrap v5.
Aqui está o resultado:
Antes de saires deste artigo deixa-me apresentar-te a empresa onde eu alojo as minhas aplicações. A WebHS tem sido uma parceira excelente para os meus projectos. Tenho projectos em alojamentos partilhados e tenho servidores dedicados também. Têm um suporte 20 estrelas (não estou a exagerar) extremamente rápido a resolver problemas e sempre dispostos a ajudar. Recomendo muito.
Para saberes mais clica na imagem seguinte.
Fonte: Com as devidas adaptações, este post é baseado no seguinte link: https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/
About Post Author
4 Responses
Parabéns!!!
Está dando esse erro:
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can’t resolve ‘utilities/api’ in ‘C:\laragon\www\laravel-inertia-ved\node_modules\bootstrap\scss’
at finishWithoutResolve (C:\laragon\www\laravel-inertia-ved\node_modules\enhanced-resolve\lib\Resolver.js:293:18)
at C:\laragon\www\laravel-inertia-ved\node_modules\enhanced-resolve\lib\Resolver.js:362:15
at C:\laragon\www\laravel-inertia-ved\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (C:\laragon\www\laravel-inertia-ved\node_modules\tapable\lib\HookCodeFactory.js:33:10), :16:1)
at C:\laragon\www\laravel-inertia-ved\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (C:\laragon\www\laravel-inertia-ved\node_modules\tapable\lib\HookCodeFactory.js:33:10), :27:1)
at C:\laragon\www\laravel-inertia-ved\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
at C:\laragon\www\laravel-inertia-ved\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (C:\laragon\www\laravel-inertia-ved\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
at C:\laragon\www\laravel-inertia-ved\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at processResult (C:\laragon\www\laravel-inertia-ved\node_modules\webpack\lib\NormalModule.js:721:19)
at C:\laragon\www\laravel-inertia-ved\node_modules\webpack\lib\NormalModule.js:827:5
at C:\laragon\www\laravel-inertia-ved\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at C:\laragon\www\laravel-inertia-ved\node_modules\loader-runner\lib\LoaderRunner.js:251:18
at context.callback (C:\laragon\www\laravel-inertia-ved\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.loader (C:\laragon\www\laravel-inertia-ved\node_modules\css-loader\dist\index.js:155:5)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
1 ERROR in child compilations (Use ‘stats.children: true’ resp. ‘–stats-children’ for more details)
webpack compiled with 2 errors
Have you ever thought about including a little bit more than just your articles?
I mean, what you say is valuable and everything.
But just imagine if you added some great visuals or video clips to give your posts more, “pop”!
Your content is excellent but with images and videos, this blog could certainly be one of the very best in its field.
Fantastic blog!
I will think about it… I don’t have many time.