Search code examples
npmbulma

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

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.

Solution

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