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 [email protected]

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

please, add your vite.config.js file content to the question. — flydev
– flydev, Commented Nov 14, 2022 at 14:05
refer this for compile sass with vite in laravel stackoverflow.com/a/76139847/14344959 — Harsh Patel
– Harsh Patel, Commented Apr 30, 2023 at 6:33

Andrey · Accepted Answer · 2022-12-16 16:28:32Z

14

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

answered Dec 16, 2022 at 16:28

Andrey

5535 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sakarya Over a year ago

what happened my custom css file. how can I import bootstrap with custom style.css file.

Collectives™ on Stack Overflow

How to install Bootstrap 5 on Laravel 9 with Vite?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related