Use npm/yarn and node-sass
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
You only need 2 packages to customize Bulma:
package.json should look like this at this point.
sass folder in which you add a file called
Make sure to write the correct path to the
Create an HTML template which uses several Bulma components.
Save this file as
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:
5. Add node scripts to build your CSS
To build a CSS file from a Sass file, we can use node scripts. In
package.json, add the following:
sass/mystyles.scss as an input, and outputs
css/mystyles.css, while omitting the source map
css-watch builds the CSS and watches for changes
start is simply a shortcut for
To test it out, go in your terminal and run the following command:
If set up correctly, you will see the following message:
Reload the page and it should be styled like this:
To watch for changes, just launch the following command:
6. Add your own Bulma styles
Replace the content of the
mystyles.scss file with the following:
Since you are watching for changes, simply save the file to see the result:
And voilà! You've managed to install and customize Bulma.