How to add Bulma and PrismJs to a Gatsby project avoiding CSS conflicts

January 20, 2019

Bulma is a popular CSS library like bootstrap. It’s not too difficult to add to Gatsby but there are some tricky bits where you need some plugins and the CSS classes can conflict.

First add all the required libraries from npm

> yarn add bulma gatsby-plugin-sass prismjs
> yarn add -D node-sass

Add the new plugin to gatsby-config.js. Notice “gatsby-plugin-sass” and “gatsby-remark-prismjs”

module.exports = {
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-transformer-json`,
    {
      options: {
        path: `./src/data/`,
      },
      resolve: `gatsby-source-filesystem`,
    },
    {
      options: { name: 'pages', path: `${__dirname}/src/pages` },
      resolve: `gatsby-source-filesystem`,
    },
    `gatsby-plugin-typescript`,
    `gatsby-plugin-styled-components`,
    {
      options: {
        excerpt_separator: `<!-- end excerpt -->`,
        plugins: [
          {
            options: {
              maxWidth: 590,
            },
            resolve: `gatsby-remark-images`,
          },
          {
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
            resolve: `gatsby-remark-responsive-iframe`,
          },
          'gatsby-remark-prismjs',
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-smartypants',
        ],
      },
      resolve: `gatsby-transformer-remark`,
    },

Create a global sass file to import the classes. I put mine in /src/styles. Import this way so sass loader correctly imports all the required sass from Bulma.

@charset "utf-8";
@import '~bulma/sass/utilities/initial-variables';
// Edit your Bulma variables here
@import '~bulma';

create gatsby-browser.js and import the new sass file there.

import './src/styles/global.scss'

Just remember that all Bulma textual content like h1 and p tags only get styles in a container with the class name “content”. If it looks like Bulma isn’t imported correctly, check that your text content is in some kind of container like this.

<div class="content"><p>my text</p></div>

Bulma and Prism Js have some conflicting classes so you need to override this in the global sass file (/src/styles/_global.scss in my example)

.token.tag,
.token.content,
.token.number {
  display: inline;
  padding: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
  vertical-align: inherit;
  border-radius: inherit;
  font-weight: inherit;
  white-space: inherit;
  background: inherit;
  margin: inherit;
}

You can see this in action on my blog source code @ https://github.com/darraghoriordan/darragh-oriordan-com


Darragh ORiordan

Hi! I'm Darragh ORiordan. I live and work in Auckland, New Zealand 🥝 enjoying the ocean 🏄 and building things on the web 💻 Contact me on Twitter!