What is the recommended way to use Sass?

[nicholaschiang]

I was reading the Next.js documentation and it seems as if Next.js has built-in support for Sass.

This brings up some questions:

• Why is there a @zeit/next-sass plugin then?
• What is the recommended way to use Sass with Next.js?
• What implementation does Next.js use by default?
  • How about the @zeit/next-sass plugin?
  • And why isn't it documented?
• How would one specify a Sass includePaths option to @use styling included in our node_modules?

[sangdth]

The built-in support is really new, has just added recently. The @zeit/next-sass is used before the built-in released.

[samstr]

I'd like to see some examples using built-in scss, and also a note in the README.

I just spent some time setting up next-sass only to find out it's built-in now...

[sangdth]

It is right in the documentation, in short:

• For global styles, put it into custom _app file, import '../your/path/global.scss'
• For component (module) styles, put it with the [name].module.scss convention, e.g. import './Button.module.scss'

Also, they have updated the example with built-in sass support at #11015, so the name is quite mislead.

It works out of the box in my project.

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using https://nextjs.org/docs/basic-features/built-in-css-support as zeit/next-css and zeit/next-sass have been deprecated in favor of the built-in support.