[Dúvida] VITE - config | Laravel: criando uma aplicação com MVC

Daniel,

Vamos lá, a configuração abaixo é aplicavel para instalações a partir do Laravel 9.19 em que o Webpack e arquivos de configuração já foram substituídos pelo Vite. Realizando uma nova instalação do Laravel hoje, foi instalada a versão v9.43.0, sendo então aplicável o procedimento abaixo:

1) Dentro da pasta do projeto, execute o npm install:

npm i

2) Faça a instalação do sass, do bootstrap e também do popper.js (biblioteca utilizada pelo bootstrap). Mesmo que esses componentes já estejam instalados, não tem problema, no máximo o npm vai inspecionar os pacotes e confirmar a instalação.

npm i --save-dev sass bootstrap @popperjs/core

3) Verifique o arquivo vite.config.js e deixe igual o arquivo abaixo:

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

export default defineConfig({
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
})

4) Altere o nome da pasta: "resources/css" para "resources/sass".

5) Dentro da pasta "resources/sass", altere o nome do arquivo "app.css" para "app.scss", ficando então "resources/sass/app.scss". O conteúdo deste arquivo deve ficar conforme abaixo.

@import "~bootstrap/scss/bootstrap";

6) Deixe o conteúdo do arquivo "resources/js/app.js" conforme abaixo:

import './bootstrap';

7) Durante a instalação do bootstrap, foi criado o arquivo "resources/js/bootstrap.js". No inicio deste arquivo acrescente as linhas abaixo:

    import '../sass/app.scss'
    import * as bootstrap from 'bootstrap'
    ...

E a configuração esta concluída. Para testar, faça o seguinte:

a) Crie um arquivo html (blade) fazendo a chamada para o Vite incluir o bootstrap, e faça uso de algumas classes. Arquivo "resources/views/teste.blade.php". Conteúdo do arquivo de exemplo (no teu projeto faça a chamada do @vite no arquivo de layout base).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @vite(['resources/js/app.js'])
    <title>Laravel, Bootstrap & Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Olá Mundo, Laravel, Bootstrap & Vite!</h1>
      <button class="btn btn-primary">Clique aqui!</button>
    </div>
  </body>
</html>

b) Crie uma rota para este arquivo de testes, no arquivo "routes/web.php"

Route::get('/teste', function () {
    return view('teste');
});

c) Na linha de comando da pasta do seu projeto, inicie o servidor do NPM/Vite, para ele fazer a montagem dos arquivos e fazer o hot reload, no caso de alteração do estilo:

npm run dev

d) Na linha de comando da pasta do seu projeto, em outro terminal, inicie o servidor do PHP/Laravel:

php artisan serve

e) Acesse a rota criada no teu navegador em http://localhost:8000/teste Se tudo foi configurado corretamente, conseguirá ver os estilos do bootstrap aplicados.

( Resultado dos estilos do bootstrap aplicados empacotados pelo Vite )

Mergulhe em programação