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 work with npm, so please can you guide me. Do I have to refer to it in my js by saying: import bulma from 'bulma' or require it, I don't know where my files are. That means I don't know where are they located.

Answer 1

You can find the final css build at projectName/node_modules/bulma/css/bulma.css.

Chances are you're using a file loader with webpack and similar. If, for example in a Vue project, you have that, then you can use import syntax:

import 'bulma/css/bulma.css'

within your js. This works because having import [xyz from] 'xyz' will look at projectName/node_modules/xyz, and in the case of a css file, it's as simple as that!

If you do not have that installed, you need to find a way to send it over to the client. Just copy projectName/node_modules/bulma/css/bulma.css into a file, maybe bulma.css, in either an assets or public or whatever you use, then fetch it like you'd fetch any css file within the html: <link rel="stylesheet" href="/bulma.css">

Answer 2

It's CSS only.

Bulma is a CSS framework.

So you can add it just in your index.html like a normal css link:

<link rel="stylesheet" type="text/css" href="your/bulma/path/bulma.css />

Edit: You have installed bulma through the nodejs environment with the package manager npm so you must have a directory called node_modules and inside the bulma directory.

Answer 3

That is really unevident. If you want to get bulma work with fontawesome5 via npm, minimum working deps (for now) are:

npm i -S bulma @fortawesome/fontawesome @fortawesome/fontawesome-free-solid

then needed to be initialized like this:

import fontawesome from '@fortawesome/fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import 'bulma/css/bulma.css'

fontawesome.library.add(solid)

More details can be found here: https://fontawesome.com/how-to-use/use-with-node-js

Answer 4

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

If you have a main.css file for your project or something similar to that, you can add the above line inside your main.css file. This will import the default bulma.css file located inside your project's path node_modules/bulma/css/ after you have installed bulma via npm.

NOTE: you must include your main.css file( or something similar) inside your index.html as a static import if you chose to go this way. For that you need to have something like:

<link rel="stylesheet" href="/css/main.css">

I prefer this since bulma is a CSS framework, I think it's best to keep the stylesheets linked with each other.

Answer 5

I had the same issue in Vue and in the end I solved it thanks to this link. For Bulma you just need to run:

$ npm install bulma

After npm install, your files should be located under node_modules folder.

For Bulma, check that you have a folder bulma under node_modules, then you can import bulma css framework in your main.js file as follows: import "./../node_modules/bulma/css/bulma.css";

Note: even if on the link I provided they suggest the full path to bulma this is not a good practice as @Omkar pointed out, so I ended up importing bulma as follows: import "bulma/css/bulma.css";

Answer 6

declaring this in the index.html file worked for me.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">

In React, we have to declare this in the same html file where the root of the app is present.