Gatsby and Sass Config - Fails during build

I’m currently using Gatsby to build my personal website and Sass for all the styling.

However, my build keeps failing because it cannot import a Sass partial @import 'header'. I’m wondering if this has to do with my Gatsby config, specifically the Gatsby Sass plugin.

I’m currently bringing in the main ‘styles.scss’ into my ‘Layout.js’ file, which is applied to all the pages on the site. It seems to pick up the Sass file, however it cannot read the Sass partial. The strange thing is that everything looks fine during development.

These are the details from my Netlify deploy, which has failed numerous times:

6:29:36 PM: failed Building production JavaScript and CSS bundles - 17.477s
6:29:36 PM: error Generating JavaScript bundles failed
6:29:36 PM: Module build failed (from ./node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js):
6:29:36 PM: @import 'header';
6:29:36 PM: ^
6:29:36 PM:       File to import not found or unreadable: header.
6:29:36 PM:       in /opt/build/repo/src/styles/styles.scss (line 35, column 1)
6:29:36 PM: error Generating JavaScript bundles failed

hmm,

this might not apply but it’s worth a shot - if something doesn’t work on netlify but does work in development on your local machine it is often a case error:

Can you give this a read through and let us know if that fixes the issue?