Installing Bulma via NPM – Step-by-Step Guide for Developers

Learn how to install Bulma CSS using NPM for better project control and customization. This guide walks you through the installation process, setup, and how to integrate Bulma into your development workflow.

So, you’ve outgrown the CDN. Maybe you need to customize Bulma’s theme, integrate it into a larger build process, or you’re just building a serious project that deserves a professional setup. Moving to NPM is the right call.

While the CDN is great for quick prototypes, installing Bulma via NPM unlocks its full potential. It gives you direct access to the SASS source files, allowing for deep customization and efficient, streamlined workflows. Let’s walk through the process from scratch.

Why Bother with NPM? The Developer Benefits

Before we dive into the terminal, let’s clarify why we’re doing this:

Total Customization: Change colors, fonts, spacing, and more by overriding SASS variables before the CSS is compiled.
Control & Optimization: Import only the Bulma components you actually need, resulting in a smaller, more efficient stylesheet.
Integration: Seamlessly fits into modern front-end build chains using Webpack, Parcel, Vite, etc.
Maintainability: Manage your CSS dependencies just like your JavaScript dependencies, all in one place with package.json.

Prerequisites: What You’ll Need

Node.js and NPM: This is non-negotiable. If you don’t have them, head to nodejs.org and download the LTS version. This will install both node and npm on your system.
A Code Editor: VS Code, Sublime Text, WebStorm—whatever you’re comfortable with.
A Terminal/Command Line: We’ll be living here for a bit.

Step 1: Initialize Your Project

First, create a new directory for your project and navigate into it. Then, we’ll initialize a new package.json file.

				
					# Create and enter your project directory
mkdir my-bulma-project
cd my-bulma-project

# Initialize a new package.json file (you can press enter through all the prompts)
npm init -y

The -y flag accepts all the default settings for package.json. You can always edit this file later.

Step 2: Install Bulma

Now for the main event. Installing Bulma is a single command.

				
					npm install bulma

This command does two things:

Downloads the Bulma package into a node_modules folder in your project.
Adds "bulma": "^version.number" to the dependencies in your package.json file.

Your project structure should now look like this:

				
					my-bulma-project/
├── node_modules/  # (All your packages live here)
├── package.json

Step 3: The Heart of the Matter – Setting Up Your SASS Structure

This is the key difference from the CDN method. We won’t be linking to a pre-compiled CSS file. Instead, we’ll create our own main SASS file to import and customize Bulma.

1. Create a src folder in your project root, and inside it, a file named styles.scss.

Your structure should now be:

				
					my-bulma-project/
├── node_modules/
├── src/
│   └── styles.scss  # <-- This is our new file
├── package.json

2. Import Bulma. Open src/styles.scss and add the following line:

				
					// Import the entire Bulma framework
@import '../node_modules/bulma/bulma.sass';

That’s it! You are now functionally equivalent to the CDN. But wait, the magic happens when you customize.

Step 4: (The Real Reward) Customizing with SASS Variables

Let’s change the default primary color from Bulma’s trademark turquoise to a deep purple. This is done by defining your own variables before you import Bulma.

Edit your src/styles.scss file to look like this:

				
					// 1. Define your overrides first
$primary: #5d3fd3; // A nice purple color

// 2. Then import Bulma so it uses your variables
@import '../node_modules/bulma/bulma.sass';

You can customize almost anything this way—fonts, breakpoints, container sizes, you name it. Check the bulma/sass/utilities/_initial-variables.sass file in the node_modules folder to see all the variables you can override.

Step 5: Compiling SASS to CSS

Your .scss file isn’t understood by browsers. We need to compile it into a regular .css file. For this, we need a SASS compiler.

Option A: Using the Standalone SASS CLI (Simplest)
Install the SASS compiler globally and run it.

				
					# Install the SASS CLI globally
npm install -g sass

# Compile your SASS file to CSS
sass src/styles.scss dist/styles.css

This will create a dist folder with your final styles.css file, which you can then link in your HTML.

Option B: Using a Build Tool like Vite (Recommended for Real Projects)
For a more robust setup, use a modern build tool. Let’s set up Vite quickly.

				
					# Install Vite
npm install --save-dev vite

# Create a basic index.html file that links to your src/styles.scss

Add a script to your package.json:

				
					"scripts": {
  "dev": "vite",
  "build": "vite build"
}

Now run npm run dev. Vite will automatically handle the SSC compilation and even hot-reload changes!

Step 6: Link Your Compiled CSS

Finally, in your index.html file, link to the compiled CSS file, not the .scss file.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My NPM Bulma Project</title>
    <link rel="stylesheet" href="dist/styles.css"> <!-- Or the path Vite gives you -->
</head>
<body>
    <section class="section">
        <div class="container">
            <button class="button is-primary">My Purple Primary Button!</button>
        </div>
    </section>
<script>var rocket_lcp_data = {"ajax_url":"https:\/\/codersship.com\/wp-admin\/admin-ajax.php","nonce":"8cddce8885","url":"https:\/\/codersship.com\/bulma\/installing-bulma-via-npm","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg","width_threshold":1600,"height_threshold":700,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://codersship.com/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script></body>
</html>

Open this HTML file in a browser, and you’ll see your custom purple button, powered by your own NPM-based Bulma build.