Installing Bulma package on Laravel

Recently I stumbled upon a clean and lightweight frontend framework Bulma.
Bulma is a free opensource fontend framework based on flexbox and is a good alternate to Bootstrap.

Laravel by default is shipped with Bootstrap as the default frontend framework. In this short tutorial let's cover on how you can include Bulma in Laravel Framework.

We are going to install Bulma via npm dependency package manager. Make sure you have node installed in your system by going to terminal / command-prompt and run node -v

Install Bulma Package

Go to your terminal / command-prompt and run command

npm install bulma --save-dev

This will install the bulma package in your project --save-dev denotes that we want to dependency to be included as part of devDependencies.

Include Bulma in Laravel Assets

Since bulma is now available to be included in our project. We can import the bulma files in our framework.

Open file resources / app.scss

And include the following

//Bulma
@import '~bulma/bulma';

We need to remove the bootstrap dependency since these both packages clash and will result into errors like (Module build failed (from ./node_modules/sass-loader/lib/loader.js):

Comment following

// Variables
//@import 'variables';

// Bootstrap
//@import '~bootstrap/scss/bootstrap';

Run Npm Script

Once you have imported the css file, we can now go ahead and run the npm dev script to compile the sass changes into css.

Go to your terminal and run

npm run watch

This will compile and build the app.scss file into app.css and also will watch for the changes you make to your scss file on run-time.

Include the app.css file in your layout of view file and put any example code to test if Bulma is successfully imported.

<a class="button is-primary">Primary</a>

This could should give you the following output on the view page.

There you go ! Have fun building things with Laravel and Bulma.