How to install Bulma in Laravel

Install Bulma in Laravel
npm install bulma
CSS
Open de resources/assets/app.scss file in your Laravel project with an editor. Delete the Bootstrap line in this file
// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Import Bulma into this file
// Bulma
@import "~bulma/bulma.sass";
In this file you see also @import “variables”;
The code in this file is for Twitter Bootstrap, you can delete the code and use the file for Bulma scss.
Javascript
Bulma does not come with any javascript. But Laravel is still referencing to the javascript from Twitter Bootstrap. Open resources/asset/app.js Delete this line:
require('./bootstrap');
You can now remove the file ‘bootstrap.js’ (same directory as this file), we don’t use it anymore.
Test if it works
I’m using a fresh installation from Laravel so I test it in resources/views/home.blade.php Add a piece of Bulma code between the section tags, for example
<a class="button is-success">Success</a>
If you go to yourdomain.com/home you only see a link ‘Succes’ without the button styling from Bulma. This is because we first need to compile the Bulma asset files.
Run
npm run dev
If we refresh the page , we see the Bulma styling on the button.