1. Create a
In your terminal, create a new folder called
mybulma, navigate to it, then type the following command:
This will launch an interactive setup to create
package.json. When prompted for an entry point, enter
2. Install the dev dependencies
Install the packages required to parse and build your CSS:
package.json should look like this at this point.
3. Create a webpack config
This setup takes the
src folder as input, and outputs in the
src folder in which you add a file called
index.js with the following content:
Inside the same
src folder, add a file called
Make sure to write the correct path to the
6. Create a
dist folder in which you add a
css folder, and a
js folder. Leave these last two folders empty. Their content will be generated by the webpack build.
Create an HTML template which uses several Bulma components.
Save this file as
mypage.html in the
css/mystyles.css path for your stylesheet. This will be the location of the CSS file we will generate with Sass.
Open the page in your browser:
8. Add node scripts to build your bundle
package.json, add the following:
To test it out, go in your terminal and run the following command:
9. Add your own Bulma styles
Replace the content of the
mystyles.scss file with the following:
Rebuild the CSS to see the result:
And voilà! You've managed to install and customize Bulma.