SASS support only work for scss files not for sass files

[anshulguleria]

Bug report

Describe the bug

The SASS support of next-js only works for *.scss files not *.sass files.

To Reproduce

Create a *.sass files in your code and import it in any page if its *.module.sass or in _app.[js|tsx] if it contain global styles i.e. *.sass. You will start getting an error when running the dev server.

SassError: Expected newline.

But if you change them to scss extension it starts working again. Although the CSS documentation states that any of the 2 extensions can be used it works only for scss.

Expected behavior

It should work for both extensions.

Screenshots

N/A

System information

• OS: macOS,
• Browser (if applies) [e.g. chrome ]
• Version of Next.js: 9.4.4
• Version of Node.js: 12.x

[Timer]

Are you using the Sass syntax instead of Scss?

[anshulguleria]

My file was pretty simple for testing purpose. For example:

body {
    background-color: red;
}

And for modules:

.highlight {
    background-color: yellow;
}

[Timer]

If you're using the .sass extension you need to use the indented syntax:

body
	background-color: red

.highlight
	background-color: yellow

[Timer]

Updating the documentation to explain this!

[anshulguleria]

Thank you. This does help.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.