npm run dev mix doesn't work in laravel 9 - npm

Question

I have a fresh laravel 9 project
I want to create an auth system with laravel command by using
composer require laravel/ui
and also
php artisan ui bootstrap --auth
after that I did
npm install
npm run dev
but rather that opening a mix development to generate css styles of auth pages it gave me this output in terminal
npm run dev image
and the page style is being like this
Page styles

Answer 1

I found the solution for this problem
the problem was in the package.json file
package.json was like this:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#popperjs/core": "^2.10.2",
"axios": "^0.25",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.49",
"laravel-vite-plugin": "^0.4.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vite": "^2.9.11"
}
}
As you can see the dev in script was applied to vite,
"scripts": {
"dev": "vite",
"build": "vite build"
}
I just modified vite to mix and run
npm install again
and the problem was resolve and tyles of my login page generated successfully
Styles result

Answer 2

Update - ## Better Solution:
Installing Laravel/ui
composer require laravel/ui
Install Bootstrap Auth Scaffold
php artisan ui bootstrap --auth
In Vite.config file
import path by adding this at top:
import path from 'path';
after plugins add this:
resole: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_module/bootstrap'),
}
}
final result of vite config file will be like this:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
resole: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_module/bootstrap'),
}
}
});
From resources/js/app.js - add these lines
import '../sass/app.scss';
import * as boostrap from 'bootstrap'
Final Result of resources/js/app.js will be like this
import './bootstrap';
import '../sass/app.scss';
import * as boostrap from 'bootstrap'
Final Step is to change styles and script to #vite directive in resources/view/layouts/app.blade.php
change any css or js files from this type
<link href="{{asset('css/app.css')}}" rel="stylesheet" />
to #vite directive type
#vite(['resources/css/app.css', 'resources/css/app.css'])
Make sure you already have those files before trying to include it, otherwise vite will cause an error.