How do I install Bulma in Angular?

Question

I am getting an error, visible via the browser inspector after installing Bulma

I have angular-10.

The steps I took are

• npm -i bulma. The bulma directory is in node_modules/bulma

• npm i -D @creativebulma/bulma-collapsible

• Load javascript in angular.json as

  "styles": [
          "src/styles.css",
          "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
          "./node_modules/bulma/css/bulma.css"
  ],
  

• Load the css in a component css file

  @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
  @import '~bulma/css/bulma.css';
  

The error message via the console is

 Could not load content for http://localhost:4200/node_modules/bulma/css/bulma.css

Answer 1

You load the bulma.css multiple time, once at angular.json and again at css import.

The steps could be simply,

1. Create new Angular application by ng new angular-bulma

2. Add bulma to the project by npm install bulma

3. Update the angular.json for bulma css by

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