1
resposta

[Sugestão] Instalando o Laravel + Bootstrap + Vite

Caso você queira usar a mix, tem quer ter o php na msm versão do instrutor, mas para usar o vite tem que usar esse comandos:

1 - composer require laravel/ui

2 - php artisan ui bootstrap

3 - npm install

Nessa versão mais recente, n se usar mais o arquivo webpack e sim o vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
            //Arquivos que vão ser compilados
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

4 - npm run build

Agora com esse comando, foi criado na pasta public, a pasta build e lá vai ter o css e js compilado do bootstrap E no manifest.json vai ter os valor tipo assim:

{
 "resources/js/app.js": {
   "file": "assets/app-c1097373.js",
   "isEntry": true,
   "src": "resources/js/app.js"
 },
 "resources/sass/app.scss": {
   "file": "assets/app-71455456.css",
   "isEntry": true,
   "src": "resources/sass/app.scss"
 }
}

Com o css e js dinâmicos, cada vez quer for usado o comando build, ira gerar um novo valor para o css e js, isso é para não ficar em cache e o laravel vai qual arquivo será usado através do manifest.json.

No pasta resources, vai ter a pasta sass com os arquivos necessários, a mesma coisa serve para pasta js.

Para usar os arquivos do bootstrap no seu layout é só add isso: @vite(['resources/sass/app.scss','resources/js/app.js'])

E usando o comando npm run dev, vai ser criado novo localhost que ficará escutando qualquer tipo de modificação no código e será atualizado automaticamente sem precisar ficar dando f5 na página.

1 resposta

Opa Heber, tudo bem?

Fico feliz pela sua iniciativa de publicar aqui no fórum um passo a passo de como instalar e utilizar o Vite. Tenho certeza que ajudará os alunos que estão tentando utilizá-lo em vez do Mix. Continue assim!

Se caso durante os seus estudos você tenha dúvidas ou problemas, você pode contar com a comunidade do fórum da Alura!

Bons estudos!