After installing bulma through NPM, how can I refer it in my project

Question

I have pulled in bulma in my project through :

$ npm install bulma

After that, how can I refer to it in my pages. I really don\'t know how to

Answer 1

Alternative Answer: CSS Preprocessing

I'm posting a somewhat indirect way to answer the question. I came here looking to see how I could use rendered SASS in my main app.js (in my case, for use in a pug.js template).

The answer is: use a CSS pre-processor. In this minimal example, I'll use node-sass.

0. Install:

npm install node-sass
npm install bulma

1. Create an inherited style

mystyles.scss:

@charset "utf-8";
@import "node_modules/bulma/bulma.sass"; // <--- Check and make sure this file is here after installing Bulma

This will inherit styles from the Bulma installation, but override those styles with what you place here.

2. Build the CSS

app.js:

const nsass = require("node-sass");

const rendered_style = nsass.renderSync({ // <---- This call is synchronous!
  file: "./mystyles.scss",
});

Here, node-sass is processing the .scss file into a Result object that has CSS buffer. Note that node-sass has an asynchronous call (sass.render()) as well, if needed.

3. Use the CSS

The buffer containing the CSS is now available at rendered_style.css

console.write(rendered_style.css)

--Notes--

The benefit of the SASS approach is that it unlocks Customization, which is what makes Bulma powerful!

Keep in mind that if app.js is your entry point, the CSS will be rendered every time you run the server. If your styles aren't changing frequently, it may be best to write it out to a file. You can see more on this approach in the Bulma Documenation I adapted this from.