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

Published on January 20, 2019 - Tagged: #frontend-development

Follow me on twitter for more posts like this

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: path.resolve(`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 className="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 Sydney, Australia building supporting happy teams that create high quality software for the web.

I also make tools for busy developers! Do you have a new M1 Mac to setup? Have you ever spent a week getting your dev environment just right?

My DevShell tooling will save you 30+ hours configuring your dev environment with all the best modern tools. Get it here

https://darraghoriordan.gumroad.com/l/devshell


Read more articles like this one...

List of article summaries

#frontend-development

Migrating a Create React App (CRA) application to Vite

I had an existing app that was scaffolded using create react app (CRA) and extended with craco. CRA didn’t support the tooling I needed so I had to look for an alternative. I found Vite.

There are some incredible improvements in Vite over CRA, including PostCSS 8.0 support so I decided to migrate my production application.

I’ll explain some of the benefits of Vite and describe the steps you need to take to upgrade your application.

#frontend-development

Fix React Router navlink-exact when activeClass is not working

If you’re adding navlinks with react router because you want to set the active class you might find that it doesn’t work. These are the steps I had to take to make this work.

#frontend-development

Avoid rebuild of React App in every CI stage

If you have a react app you can use env vars like REACT_APP_MY_ENV_VAR in your application and React will automatically pull them in to your app when you build the production application.

This is very useful but if you have variables that change for each environment and your application build takes a long time, you might want to avoid building unnecessarily in CI. For example you might have a QA environment and a Staging environment that have different configuration.

We type-check our code on each build and that was taking 5 minutes+ to build each environment so we had to make it faster. We changed our app from using REACT_APP env vars to using a configuration file that we could quickly write to using CI.

Our CI system is Azure DevOops so the CI scripts here are specifically for Azure DevOps but they apply to most CI systems with small changes.

The real work happens in a Node.js script that would work anywhere.

#frontend-development

Setting and debugging Azure Devops yaml env vars

I received an interesting question yesterday that highlighted how some parts of environment variables in Azure devops are not clear. Here are some things to check if your environment variables aren’t working in azure pipelines.