Enable sassOptions support in next.config.js (#12685)

docs/basic-features/built-in-css-support.md

@@ -92,6 +92,48 @@ Regular `<link>` stylesheets and global CSS files are still supported.
 In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files.
 These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
 
+## Sass Support
+
+Next.js allows you to import Sass using both the `.scss` and `.sass` extensions.
+You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension.
+
+Before you can use Next.js' built-in Sass support, be sure to install [`sass`](https://github.com/sass/sass):
+
+```bash
+npm install sass
+```
+
+Sass support has the same benefits and restrictions as the built-in CSS support detailed above.
+
+### Customizing Sass Options
+
+If you want to configure the Sass compiler you can do so by using `sassOptions` in `next.config.js`.
+
+For example to add `includePaths`:
+
+```js
+const path = require('path')
+
+module.exports = {
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
+}
+```
+
+## Less and Stylus Support
+
+To support importing `.less` or `.styl` files you can use the following plugins:
+
+- [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
+- [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)
+
+If using the less plugin, don't forget to add a dependency on less as well, otherwise you'll see an error like:
+
+```bash
+Error: Cannot find module 'less'
+```
+
 ## CSS-in-JS
 
 <details>
@@ -158,32 +200,6 @@ export default HelloWorld
 
 Please see the [styled-jsx documentation](https://github.com/zeit/styled-jsx) for more examples.
 
-## Sass Support
-
-Next.js allows you to import Sass using both the `.scss` and `.sass` extensions.
-You can use component-level Sass via CSS Modules and the `.module.scss` or `.module.sass` extension.
-
-Before you can use Next.js' built-in Sass support, be sure to install [`sass`](https://github.com/sass/sass):
-
-```bash
-npm install sass
-```
-
-Sass support has the same benefits and restrictions as the built-in CSS support detailed above.
-
-## Less and Stylus Support
-
-To support importing `.less` or `.styl` files you can use the following plugins:
-
-- [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
-- [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)
-
-If using the less plugin, don't forget to add a dependency on less as well, otherwise you'll see an error like:
-
-```bash
-Error: Cannot find module 'less'
-```
-
 ## Related
 
 For more information on what to do next, we recommend the following sections:

packages/next/build/webpack-config.ts

@@ -1032,7 +1032,7 @@ export default async function getBaseWebpackConfig(
     isServer,
     isReactRefreshEnabled,
     assetPrefix: config.assetPrefix || '',
-    sassOptions: config.experimental.sassOptions,
+    sassOptions: config.sassOptions,
   })
 
   if (typeof config.webpack === 'function') {

packages/next/next-server/server/config.ts

@@ -36,6 +36,7 @@ const defaultConfig: { [key: string]: any } = {
     canonicalBase: '',
   },
   exportTrailingSlash: false,
+  sassOptions: {},
   experimental: {
     cpus: Math.max(
       1,
@@ -50,7 +51,6 @@ const defaultConfig: { [key: string]: any } = {
     reactMode: 'legacy',
     workerThreads: false,
     basePath: '',
-    sassOptions: {},
     pageEnv: false,
     reactRefresh: true,
   },

test/integration/scss-fixtures/basic-module-include-paths/next.config.js

@@ -1,9 +1,7 @@
 const path = require('path')
 
 module.exports = {
-  experimental: {
-    sassOptions: {
-      includePaths: [path.join(__dirname, 'styles')],
-    },
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
   },
 }