Node Sass version 5.0.0 is incompatible with ^4.0.0.

Description

When adding the gatsby-plugin-sass to new project, I get the error in the terminal Generating development JavaScript bundle failed Node Sass version 5.0.0 is incompatible with ^4.0.0.

I saw this in stack overflow, seems like there was just a change. Hoping this is the issue: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

( I tested with a few different gatsby starters and the issue persisted regardless of starter also upgraded my node version just incase)

Steps to reproduce

download Gatsby default starter add gatsby-plugin-sass to project

Expected result

gatsby develop runs successfully

Actual result

Generating development JavaScript bundle failed Node Sass version 5.0.0 is incompatible with ^4.0.0.

Environment

System: OS: macOS 10.15.7 CPU: x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm Browsers: Chrome: 86.0.4240.111 Safari: 14.0 npmPackages: gatsby: ^2.24.91 => 2.24.91 gatsby-plugin-sass: ^2.3.22 => 2.3.22

[kimbaudi]

Another workaround is to just use Dart Sass instead of Node Sass. Especially since LibSass and Node Sass are deprecated

install Dart Sass:

npm i -D sass

update your gatsby-config.js :

before:

{
    resolve: `gatsby-plugin-sass`
}

after:

{
    resolve: `gatsby-plugin-sass`,
    options: {
        implementation: require('sass')
    },
}

[nhevia]

Workaround: use node-sass@4.14.1 (Error: Node Sass version 5.0.0 is incompatible with ^4.0.0)

This is sass-loader requiring semver ^4.0.0, but node-sass just updated to 5.0.0 Pending PR https://github.com/webpack-contrib/sass-loader/pull/899