diff --git a/docs/docs/how-to/local-development/troubleshooting-common-errors.md b/docs/docs/how-to/local-development/troubleshooting-common-errors.md index 84e2dcd202f85..9ac7b0b5e730f 100644 --- a/docs/docs/how-to/local-development/troubleshooting-common-errors.md +++ b/docs/docs/how-to/local-development/troubleshooting-common-errors.md @@ -34,7 +34,7 @@ Here are some examples of plugins that require you to install more than just the - [gatsby-plugin-emotion](/packages/gatsby-plugin-emotion/): `@emotion/react`, and `@emotion/styled` - [gatsby-plugin-styled-components](/packages/gatsby-plugin-styled-components/): `styled-components`, and `babel-plugin-styled-components` -- [gatsby-plugin-sass](/packages/gatsby-plugin-sass/): `node-sass`, or `dart-sass` +- [gatsby-plugin-sass](/packages/gatsby-plugin-sass/): `node-sass`, or `sass` - [gatsby-plugin-material-ui](/packages/gatsby-plugin-material-ui/): `@material-ui/styles` - [gatsby-image](/packages/gatsby-image/): `gatsby-transformer-sharp`, and `gatsby-plugin-sharp` diff --git a/docs/docs/how-to/styling/bulma.md b/docs/docs/how-to/styling/bulma.md index e058be3c27582..a9be1fd874afd 100644 --- a/docs/docs/how-to/styling/bulma.md +++ b/docs/docs/how-to/styling/bulma.md @@ -10,7 +10,7 @@ This guide assumes that you have a Gatsby project set up. If you need to set up For starters, let's install all the required packages we're going to need. -`yarn add bulma node-sass gatsby-plugin-sass` +`yarn add bulma sass gatsby-plugin-sass` Then, add the `gatsby-plugin-sass` in to `gatsby-config.js`. diff --git a/docs/docs/how-to/styling/sass.md b/docs/docs/how-to/styling/sass.md index 486171ac3d767..00e6055de2be3 100644 --- a/docs/docs/how-to/styling/sass.md +++ b/docs/docs/how-to/styling/sass.md @@ -12,9 +12,9 @@ Sass will compile `.sass` and `.scss` files to `.css` files for you, so you can This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [**Quick Start guide**](/docs/quick-start/), then come back. -1. Install the Gatsby plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass/) and `node-sass`, a required peer dependency as of v2.0.0. +1. Install the Gatsby plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass/) and `sass`, a required peer dependency as of v3.0.0. -`npm install node-sass gatsby-plugin-sass` +`npm install sass gatsby-plugin-sass` 2. Include the plugin in your `gatsby-config.js` file. diff --git a/docs/docs/how-to/styling/tailwind-css.md b/docs/docs/how-to/styling/tailwind-css.md index f5d6c2a458bb9..d2616a0c594f9 100644 --- a/docs/docs/how-to/styling/tailwind-css.md +++ b/docs/docs/how-to/styling/tailwind-css.md @@ -118,10 +118,10 @@ See the [Twin + Gatsby + Emotion installation guide](https://github.com/ben-roge #### Option #3: SCSS -1. Install the Gatsby SCSS plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass) and `node-sass`. +1. Install the Gatsby SCSS plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass) and `sass`. ```shell -npm install node-sass gatsby-plugin-sass +npm install sass gatsby-plugin-sass ``` 2. To be able to use Tailwind classes in your SCSS files, add the `tailwindcss` package into the `postCssPlugins` parameter in your `gatsby-config.js`. diff --git a/docs/docs/recipes/styling-css.md b/docs/docs/recipes/styling-css.md index 2a787ebbb56a8..51f92bdffc242 100644 --- a/docs/docs/recipes/styling-css.md +++ b/docs/docs/recipes/styling-css.md @@ -230,9 +230,9 @@ Sass will compile `.scss` and `.sass` files to `.css` files for you, so you can ### Directions -1. Install the Gatsby plugin [gatsby-plugin-sass](/plugins/gatsby-plugin-sass/) and `node-sass`. +1. Install the Gatsby plugin [gatsby-plugin-sass](/plugins/gatsby-plugin-sass/) and `sass`. -`npm install node-sass gatsby-plugin-sass` +`npm install sass gatsby-plugin-sass` 2. Include the plugin in your `gatsby-config.js` file. diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md index 958f4f8b75d8c..730edcf8e432d 100644 --- a/packages/gatsby-plugin-sass/README.md +++ b/packages/gatsby-plugin-sass/README.md @@ -4,7 +4,7 @@ Provides drop-in support for Sass/SCSS stylesheets ## Install -`npm install node-sass gatsby-plugin-sass` +`npm install sass gatsby-plugin-sass` ## How to use @@ -64,10 +64,10 @@ plugins: [ ### Alternative Sass Implementations -By default the node implementation of Sass (`node-sass`) is used. To use the implementation written in Dart (`dart-sass`), you can install `sass` instead of `node-sass` and pass it into the options as the implementation: +By default, the Dart implementation of Sass (`sass`) is used. To use the implementation written in Node (`node-sass`), you can install `node-sass` instead of `sass` and pass it into the options as the implementation: ```shell -npm install --save-dev sass +npm install node-sass ``` ```javascript:title=gatsby-config.js @@ -75,7 +75,7 @@ plugins: [ { resolve: `gatsby-plugin-sass`, options: { - implementation: require("sass"), + implementation: require("node-sass"), }, }, ] @@ -210,6 +210,10 @@ plugins: [ +### v3.0.0 + +- `sass-loader` is updated to v10 which adds support for `node-sass@^5.0.0` but also switches the default `implementation` to `sass`. webpack also recommends using `sass` so this is reflected in the documentation here, too. In the [deprecation notice of node-sass](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) it is noted that switching from `node-sass` to `sass` is straightforward as both packages use the same JavaScript API. + ### v2.0.0 - `node-sass` is moved to a peer dependency. Installing the package diff --git a/packages/gatsby-plugin-sass/package.json b/packages/gatsby-plugin-sass/package.json index 593612c3af1d0..d8dce3844178f 100644 --- a/packages/gatsby-plugin-sass/package.json +++ b/packages/gatsby-plugin-sass/package.json @@ -8,7 +8,7 @@ }, "dependencies": { "@babel/runtime": "^7.12.5", - "sass-loader": "^7.3.1" + "sass-loader": "^10.1.0" }, "devDependencies": { "@babel/cli": "^7.12.1", @@ -28,7 +28,7 @@ "main": "index.js", "peerDependencies": { "gatsby": "^2.0.0", - "node-sass": "^4.9.0" + "sass": "^1.30.0" }, "repository": { "type": "git", diff --git a/yarn.lock b/yarn.lock index 360b338aa5873..1cec39cbcc5de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15734,7 +15734,7 @@ loader-utils@^0.2.16: json5 "^0.5.0" object-assign "^4.0.1" -loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0: +loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== @@ -17295,10 +17295,10 @@ negotiator@0.6.2, negotiator@~0.6.2: resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw== -neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1: - version "2.6.1" - resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c" - integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw== +neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" + integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0: version "2.1.0" @@ -22369,16 +22369,16 @@ saslprep@^1.0.0: dependencies: sparse-bitfield "^3.0.3" -sass-loader@^7.3.1: - version "7.3.1" - resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.3.1.tgz#a5bf68a04bcea1c13ff842d747150f7ab7d0d23f" - integrity sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA== +sass-loader@^10.1.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.1.0.tgz#1727fcc0c32ab3eb197cda61d78adf4e9174a4b3" + integrity sha512-ZCKAlczLBbFd3aGAhowpYEy69Te3Z68cg8bnHHl6WnSCvnKpbM6pQrz957HWMa8LKVuhnD9uMplmMAHwGQtHeg== dependencies: - clone-deep "^4.0.1" - loader-utils "^1.0.1" - neo-async "^2.5.0" - pify "^4.0.1" - semver "^6.3.0" + klona "^2.0.4" + loader-utils "^2.0.0" + neo-async "^2.6.2" + schema-utils "^3.0.0" + semver "^7.3.2" sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4: version "1.2.4"