Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

npm

bulma

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.

like image 561
TheBAST Avatar asked May 17 '17 07:05

TheBAST


People also ask

How do you import Bulma into react?

Once the React app is installed on your local machine successfully, switch to its directory using the cd bulma-tutorial command, and install the Bulma package into your React project using the npm install bulma command. After installing Bulma, run npm start to access the app on your browser window via localhost:3000 .

How do I add Bulma CSS to HTML?

Install Bulma Using Bulma out the box is as fast as adding a single CSS file. Using the CDN add a link in the HTML. If it is necessary to change variables and have more control over the framework, npm install Bulma can be used (see the full documentation (opens in new tab)).


2 Answers

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

like image 152
towc Avatar answered Oct 18 '22 13:10

towc


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

like image 45
nipunshakya Avatar answered Oct 18 '22 15:10

nipunshakya