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

Pedestal

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"
    ],
   

Stairway

Yes. The trick is testing with a basic section class="hero" and see that the css is being applied – Pedestal

Answer 2

Do not do the following:

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

as this will override the changes you make in the src/style.scss. Instead do this:

"styles": [
  "src/styles.scss"
 ]

and in the src/styles.scss file add your imports at the very end of the file. Like:

@charset "utf-8";

$menu-item-color: red;
$text: red;
$menu-item-radius: red;
$radius-small: red;
$menu-item-hover-color: red;
$text-strong: red;
$menu-item-hover-background-color: red;
$background: red;
$menu-item-active-color: red;
$link-invert: red;
$menu-item-active-background-color: red;
$link: red;
$menu-list-border-left: red;
$menu-list-line-height: red;
$menu-list-link-padding: red;
$menu-nested-list-margin: red;
$menu-nested-list-padding-left: red;
$menu-label-color: red;
$text-light: red;
$menu-label-font-size: red;
$menu-label-letter-spacing: red;
$menu-label-spacin: red;

@import "../node_modules/bulma/bulma.sass";

Fadden

Answer 3

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

This does not work now. You can only add bulma or bootstrap to styles.css by @import 'bulma/css/bulma.css';

Potentiate