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