Css & Js is not working after run php artisan jetstrap:swap livewire command in laravel version 9

[jenishprajapati-easternts]

Css & Js is not working after run php artisan jetstrap:swap livewire command in laravel version 9

[jenishprajapati-easternts]

[Tiththa]

I resolved it by including the scss files generated by jetstrap.

I had already installed jetstrap with bundles swapped resulting this error occurence

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
+              'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

Install sass with
npm install --save dev sass

reources/sass/app.scss : change directory path of bootstrap

-  @import '~bootstrap/scss/bootstrap';
+  @import 'node_modules/bootstrap/scss/bootstrap';  

Change your mix styles and scripts with the vite() laravel reference in app layout and guest layout: Optionalin welcome.blade.php if you are going to use it.

Remove both app.js script and app.css and stylesheet, replace with vite syntax

-    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-    <script src="{{ mix('js/app.js') }}" defer></script>
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

Re build and compile assests for build

npm run build
npm run dev