How to install Bulma in Laravel
Install Bulma in Laravel
npm install bulma
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
The code in this file is for Twitter Bootstrap, you can delete the code and use the file for Bulma scss.
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.
npm run dev
If we refresh the page , we see the Bulma styling on the button.