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.