From cb62312417d8c0f872de0315261a12c3e7d4fc02 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 5 Mar 2020 10:50:46 -0500 Subject: [PATCH] Revert "Revert "Re-add Sass Docs (#10364)" (#10577)" This reverts commit b5c70e86392c1aaf679a0de394059a095f4e52df. --- docs/basic-features/built-in-css-support.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/basic-features/built-in-css-support.md b/docs/basic-features/built-in-css-support.md index 9953b952ea655b4..0e17247a7d81a21 100644 --- a/docs/basic-features/built-in-css-support.md +++ b/docs/basic-features/built-in-css-support.md @@ -158,11 +158,23 @@ export default HelloWorld Please see the [styled-jsx documentation](https://github.com/zeit/styled-jsx) for more examples. -## Sass, Less and Stylus Support +## Sass Support -To support importing `.scss`, `.sass`, `.less`, or `.styl` files you can use the following plugins: +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-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass) - [@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)