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

user_6813433 0
Viewed 27960

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.

bulma npm
7 Answers

@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.

user_14694670

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";

user_77262290

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.

user_7052960

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.

user_55003360
Related