Gatsby: SASS file is not being read as a SASS file but as a CSS file and is causing deploy to fail

[andrewhosack]

Description

The other day I was working on adding fonts and changing the favicon to a new image within my project (this touched the layout component and also I added the 'gatsby-plugin-manifest' plugin. Out of nowhere, the all.sass file is no longer being read appropriately. It's like my project thinks the sass file is a CSS file and it can't parse the sass file correctly. I've tried taking code from my main branch from a week ago and two weeks ago and I get the same exact compile issue even on these branches that were compiling just fine before two days ago. My netlify deploy was also still deploying correctly yesterday until I cleared the cache and now my netlify deploy is getting the same exact error that my local environment is experiencing.

Steps to reproduce

1. You should be able to pull the main branch and run npm install. REPO: https://github.com/andrewhosack/SeeYouTest

2. At this point you can run npm start and you may experience some frontmatter errors but that is because there is some code missing in this repo (I've removed various files to not include in the test repo)

3. If you wait for the build to continue you should get the following error: https://i.imgur.com/L1Irov7.png

   error in ./src/components/all.sass
   ⠀
   Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
   ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

$kaldi-red: #D64000
^
Media query expression must begin with '('

Expected result

Before I started experiencing this error the code compiled just fine and the all.sass file was comiled as sass and the styles were applied to the website correctly. When I remove the sass components from this file and leave the proper CSS, the file is read just as a normal CSS file should be and the remaining styles are applied to the website correctly. The sass components are causing the compile to fail though.

Actual result

SASS file is not compiling no matter what SASS plugins I try to install, no matter how many times i delete the package-lock.json and node modules folder and rerun npm install.

Environment

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
Node: 10.16.0 - C:Program Filesnodejsnode.EXE
Yarn: 1.22.4 - C:Program Files (x86)Yarnbinyarn.CMD
npm: 6.9.0 - C:Program Filesnodejsnpm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.24.83 => 2.25.4
gatsby-image: ^2.3.5 => 2.4.21
gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
gatsby-plugin-manifest: ^2.5.2 => 2.5.2
gatsby-plugin-netlify: ^2.2.4 => 2.4.0
gatsby-plugin-netlify-cms: ^4.3.16 => 4.3.17
gatsby-plugin-purgecss: ^5.0.0 => 5.0.0
gatsby-plugin-react-helmet: ^3.2.5 => 3.3.14
gatsby-plugin-sass: ^2.2.4 => 2.4.2
gatsby-plugin-sharp: ^2.6.43 => 2.7.1
gatsby-remark-copy-linked-files: ^2.2.4 => 2.3.19
gatsby-remark-images: ^3.2.6 => 3.4.2
gatsby-remark-relative-images: ^0.3.0 => 0.3.0
gatsby-source-filesystem: ^2.2.5 => 2.4.2
gatsby-source-stripe: ^3.1.1 => 3.1.1
gatsby-transformer-remark: ^2.9.2 => 2.9.2
gatsby-transformer-sharp: ^2.4.7 => 2.5.21
npmGlobalPackages:
gatsby-cli: 2.12.15

[MRDRMUFN]

Try adding the following option to your gatsby-config.js

{
    resolve: 'gatsby-plugin-sass',
    options: {
        indentedSyntax: true
    },
},    

[andrewhosack]

After having spent 10+ hours fiddling with it, I knew it would be something simple. I just couldn't find where the available "options" were for the 'gatsby-plugin-sass' plug-in. Also, is there any indication on why, after using this website for 2 months, that this property was all of a sudden required?

That fixed my problem so I deleted the repo, thank you so much!

[LekoArts]

You might have updated your peerDependencies/dependencies and with that the new requirement came in -- difficult to say now after the fact. Our plugins follow the semver spec so that would also have been a major upgrade. Could have been many things.

Happy to hear though that you were able to resolve it :)