File to import not found or unreadable: ~_variables.sass in Gatsby.js

[stefl]

I'm attempting to use react-bulma-components with a new Gatsby.js site.

After installing, importing any component, I get the error that ~_variables.sass is not found.

My intention is just to use the default styles to get going, but it seems that I'm missing how to specify this path, or indeed that the SASS setup for my project doesn't seem to be correct. I have other SASS files that work as expected in this project.

Here's the error trace:

 ERROR  Failed to compile with 1 errors                                                                                                                 11:53:00

 error  in ./~/react-bulma-components/lib/components/hero/hero.sass

Module build failed:
@import "~_variables.sass"
^
      File to import not found or unreadable: ~_variables.sass.
      in /apps/foundrs/node_modules/react-bulma-components/lib/components/utils.sass (line 3, column 1)

 @ ./~/react-bulma-components/lib/components/hero/hero.sass 4:14-120 13:2-17:4 14:20-126

The solution is to add the following to Gatsby's gatsby-node.js file (assuming your _variables.sass file is in src/style/_variables.sass:

exports.modifyWebpackConfig = ({config, env}) => {
  config.merge({
    resolve: {
      alias: {
        '_variables.sass': path.resolve(__dirname, 'src/style/_variables.sass')
      }
    }
  })
  return config
}

Should I add a section to the documentation to show this solution or to help resolve this gotcha?

[couds]

Hi @stefl

Yes, can you add this to the docs?

Thanks

[brandonratz]

@couds The documentation provided is for Gatsby.js v1. For Gatsby.js v2 the following should be documented @ line 142 of README.md:

For Gatsby.js v2 you can add a onCreateWebpackConfig export to your gatsby-node.js file:

const path = require('path')

exports.onCreateWebpackConfig = ({
  stage,
  getConfig,
  rules,
  loaders,
  actions,
}) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        '_variables.sass': path.resolve(__dirname, 'relative/path/from/webpack/config/to/your/_variables.sass'),
      },
    },
  })
}

Happy to make a PR...

[couds]

Yes please =)

[brandonratz]

@couds no access to repo... Add me as a collaborator and I'll push my branch asap.

[stefl]

@brandonratz the way to do this is to fork the repo onto your own account, make the commit there and then you should see a "new pull request" button top right in the UI.

[brandonratz]

@stefl Thanks so much for pointing me in the right direction. I knew I wasn't doing something right.

#82

[idkq]

Spent few hours on this... to realize that order matters. If it helps anyone:

Gatsby version: 4.1.2

src/styles/layout.scss:

@import "~_variables.sass"; // order matters this has to be above @import "bulma/bulma.sass";
@import "bulma/bulma.sass";

src/components/Layout/index.tsx:

import '../../styles/layout.scss';

src/styles/_variables.sass

@import '~bulma/sass/utilities/initial-variables.sass'

// ADD HERE variables you want to override
$primary: $blue

@import '~bulma/sass/utilities/_all.sass'