File to import not found or unreadable: ~_variables.sass in Gatsby.js about react-bulma-components HOT 7 CLOSED

Hi @stefl

Yes, can you add this to the docs?

Thanks

from react-bulma-components.

@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...

from react-bulma-components.

Yes please =)

from react-bulma-components.

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

from react-bulma-components.

@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.

from react-bulma-components.

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

#82

from react-bulma-components.

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'

from react-bulma-components.