Adding Bulma CSS to An Angular App

Bulma is my current favorite CSS framework and we'll be using it for this project. You can definitely use the always awesome Bootstrap which recently hit v4 or Foundation.

Bringing In Bulma

Whenever you need a package in our JavaScript application, we'll be using npm to bring in the package. This is the way the JavaScript ecosystem is right now. Lots of packages are brought in to build something greater.

npm install --save bulma

This will bring the entire Bulma project into our node_modules folder. The --save flag will add this dependency to our package.json.

Adding the CSS File

For Angular CLI applications, all starting configuration happens in the .angular-cli.json file. In that file you'll find a styles array where we can add any CSS files we want to add to our project. You'll also find a scripts array where you can add things if you need that.

Let's add Bulma to the styles array now:

"styles": [
  "../node_modules/bulma/css/bulma.css",
]

Angular starts looking in the src folder so we'll have to jump one directory up to get to the node_modules folder. If you are using Bootstrap, go ahead and find the CSS file in your node_modules and add that path here.

Like this article? Follow @chrisoncode on Twitter