fix(gatsby-plugin-sass): Nest sassOptions (#28683)

packages/gatsby-plugin-sass/README.md

@@ -39,8 +39,10 @@ plugins: [
   {
     resolve: `gatsby-plugin-sass`,
     options: {
-      includePaths: ["absolute/path/a", "absolute/path/b"],
-      ...
+      sassOptions: {
+        includePaths: ["absolute/path/a", "absolute/path/b"],
+        ...
+      }
     },
   },
 ]
@@ -95,7 +97,9 @@ plugins: [
     resolve: `gatsby-plugin-sass`,
     options: {
       postCssPlugins: [somePostCssPlugin()],
-      precision: 6,
+      sassOptions: {
+        precision: 6,
+      },
     },
   },
 ]
@@ -111,7 +115,9 @@ plugins: [
     resolve: `gatsby-plugin-sass`,
     options: {
       postCssPlugins: [somePostCssPlugin()],
-      precision: 8,
+      sassOptions: {
+        precision: 8,
+      },
     },
   },
 ]
@@ -147,7 +153,7 @@ and common cross-browser flexbox bugs. Normally you don't need to think about it
 you'd prefer to add additional postprocessing to your Sass output you can specify plugins
 in the plugin options.
 
-## Relative paths & url()
+## Relative paths & `url()`
 
 This plugin resolves `url()` paths relative to the entry SCSS/Sass file not – as might be expected – the location relative to the declaration. Under the hood, it makes use of [sass-loader](https://github.com/webpack-contrib/sass-loader/blob/master/README.md#problems-with-url) and this is documented in the [readme](https://github.com/webpack-contrib/sass-loader/blob/master/README.md#problems-with-url).
 
@@ -189,7 +195,7 @@ plugins: [
 ]
 ```
 
-NOTE that adding resolve-url-loader will use `sourceMap: true` on sass-loader (as it is required for the plugin to work), you can then activate/deactivate source-map for Sass files in the plugin:
+**Please note:** Adding resolve-url-loader will use `sourceMap: true` on sass-loader (as it is required for the plugin to work), you can then activate/deactivate source-map for Sass files in the plugin:
 
 ```javascript:title=gatsby-config.js
 plugins: [
@@ -213,6 +219,8 @@ 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.
+- All options for both [`node-sass`](https://github.com/sass/node-sass#options) & [`sass`](https://github.com/sass/dart-sass/blob/master/README.md#javascript-api) are moved into the `sassOptions` object
+- You're now able to override the `importLoaders` option. If you have this in your options but don't intend to override it, you'll need to remove it
 
 ### v2.0.0