Gatsby: How can I use Bulma with Gatsby

[enriquemorenotent]

Import CSS Framework like Bulma

I am using Gatsby v1

I am trying to learn how to import Bulma into an existing Gatsby project. I have done

npm install bulma

but know I do not know how to make it so that it is included in the generated html.

[anantoghosh]

@enriquemorenotent It's just a css file. import it in your script file

import 'bulma/css/bulma.css'

https://github.com/jgthms/bulma#import

If you use sass then you could also import the components individually https://bulma.io/documentation/overview/modular/

[enriquemorenotent]

I tried that and it did not work. Might be because I am using v1

[anantoghosh]

It should work on v1 too. Where are you importing the file? You could import it in your layout component to make sure it is available on all your pages.

[enriquemorenotent]

If I import the file into my component, this is the output I get from the console:

https://pastebin.com/raw/q1yAyDPJ

[anantoghosh]

These errors don't look like they are directly related to bulma.css. Could you provide a repo?

[aesthytik]

directly adding the sylesheet link in html.js works perfectly!!

[enriquemorenotent]

@anantoghosh You mean a repo with my code?

[anantoghosh]

yes, preferably a minimal repository which demonstrates the issue.

[azdanov]

Do you have gatsby-plugin-sass installed? It looks like included files are in sass.

[enriquemorenotent]

Here it is.

https://github.com/enriquemorenotent/gatsby-bulma-test

A fresh new Gatby project with the dependency Bulma installed ans used

[anantoghosh]

@enriquemorenotent Ok, thanks. It looks like bulma uses css variables which in gatsby v1 are transformed using postcss cssnext, which throw these warnings. The issue is documented here: https://github.com/jgthms/bulma/issues/1190

If possible, use gatsby v2 which does not use cssnext.
You could also try adding the css link file directly in html.js as @aesthytik has said.
Or you could remove postcss completely by adding

exports.modifyWebpackConfig = ({ config }) => {
  config.merge({
    postcss() {}
  });

  return config;
};

in your gatsby-node.js

[enriquemorenotent]

How am I supposed to install v2? In the documentation does not say how to activate v2 and disable v1

[anantoghosh]

v2 doc are here: https://next.gatsbyjs.org/docs/
If you want to migrate an existing project to v2 then read https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/

[Manoz]

@enriquemorenotent Haven't we already talked about this issue on Discord? My solution didn't help you after all?

[enriquemorenotent]

While this solution works, I am not gonna start using the beta. I will await until the release is official.

In any case, the solution of my problem is going to be to not use v1. Thanks for your help.

[marcysutton]

Gatsby v2 has long been released, has anyone tried using Bulma with it? Hopefully it's a simple import. But we'd love to hear how it worked for you!

[zvodd]

I was trying to figure out how to add Bulma to a Gatsby project that was already using PostCSS.
Specifically: https://github.com/sanity-io/sanity-template-gatsby-portfolio
I replaced gastby-plugin-postcss with gatsby-plugin-sass and set the postcss plugins in gatsby-config.js, like so:

      resolve: 'gatsby-plugin-sass',
      options: {
        postCssPlugins: [ ... ]
      }

Which ended up with a CSS compile chain that allows mixing SASS with future CSS features... in what I can only describe as: probably a bad idea.
See this gist for setup and CSS examples:
https://gist.github.com/zvodd/83a03400f0030487da40078ca353d4b6