How to install Bootstrap 5 on Laravel 9 with Vite?

Question

I followed the following guide:

https://getbootstrap.com/docs/5.2/getting-started/vite/

and I still get all sorts of errors, sometimes file is not found or sometimes I just don't see the bootstrap design.

I installed Bootstrap using npm:

npm install bootstrap@5.2.2

Then I installed scss using npm:

npm i --save-dev sass

Then I added the following to vite.config.js :

resolve: {
    alias: {
        '~bootstrap': path.resolve(__dirname, 'nodes_modules/bootstrap'),
    }
}

Also added the following to /resources/app.js :

import '/resources/scss/styles.scss'    
import * as bootstrap from 'bootstrap';

I also created a new scss folder in /resources and placed the following styles.scss file inside:

// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

But when I use npm run dev or build , the Bootstrap styling don't show up, or I'm getting error about files not existing, for example:

[plugin:vite:css] [sass] ENOENT: no such file or directory, open '/var/www/myapp/nodes_modules/bootstrap/scss/bootstrap

Answer 1

Install Bootstrap 5 in Laravel 9 with Vite

Install Bootstrap 5 and dependencies To install Bootstrap from the command terminal execute the following instructions

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

Configure Vite and dependencies Rename the file: resources/css/app.css to: resources/css/app.scss Open the vite.config.js file found in the root of the project and change the reference resources/css/app.css to resources/css/app.scss

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

In the resources/css/app.scss file import Bootstrap by adding the following line of code

@import 'bootstrap/scss/bootstrap';

In the file resources/js/bootstrap.js add the following lines

...
import * as Popper from '@popperjs/core'
window.Popper = Popper
import 'bootstrap'
...

Change.blade for Hot reloading

In the resources/views/welcome.blade.php file, paste the following code before the closing tag:

...
   @vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...

Test Run dev server with command:

npm run dev

How to install Bootstrap 5 on Laravel 9 with Vite?

Question

1 answers

solution1
0 2022-12-16 16:28:32

How to install Bootstrap 5 on Laravel 9 with Vite?

Question

1 answers

solution1 0 2022-12-16 16:28:32

solution1
0 2022-12-16 16:28:32