Next.js: SCSS in new CSS Support

[andreupifarre]

I tried implementing the new CSS support under the feature flag with .module.scss and .scss files but I get an error saying that I need an appropriate loader.

How can I load .scss files with the new CSS support?

[Timer]

Sass is not currently supported by the new CSS support.

[andreupifarre]

That explains it.
Are you guys planning to add this anytime soon? And is there an alternative way of implementing SASS with it, maybe by using custom loaders in the next.config.js or similar?

[gudvinga]

@andreipfeiffer
In our project we use the next-transpile-modules plugin and, accordingly, custom scss loader in next.config.js
https://www.npmjs.com/package/next-transpile-modules

[Timer]

The new CSS support will ship stable before we add support for Sass.

In the meantime, you can use the legacy Sass plugin or custom-configure Sass support.

[andreupifarre]

@Timer do you mean implementing the new CSS Support along with @zeit/next-sass or rather avoiding new CSS Support altogether if and until SASS is supported?

[timneutkens]

or rather avoiding new CSS Support altogether if and until SASS is supported?

This. We'll land sass support shortly after.

[Epenance]

Would love this too, we have both global styles from thirdparty css frameworks, and then our own styles that we want to be able to scope. Its sad there is no easy way to implement this while we wait.

[bulutfatih]

Will you support Less too? @Timer @timneutkens

[Epenance]

@andreipfeiffer
In our project we use the next-transpile-modules plugin and, accordingly, custom scss loader in next.config.js
https://www.npmjs.com/package/next-transpile-modules

Could you give an example of how you make it work?

[andreipfeiffer]

@Epenance @gudvinga you have tagged the wrong person. I have nothing to do with this issue.

Maybe you wanted to tag @andreupifarre ?

[timneutkens]

@bulutfatih we won't add it by default as there's a very small percentage using less compared to css and scss/sass.

[kachkaev]

@timneutkens less support is needed for projects relying on Ant Design, which is a UI library with 300K weekly downloads. A corresponding Next.js example is with-ant-design-less 🙏

[timneutkens]

@kachkaev for reference under 5% of Next.js apps uses Less.

Their instruction for create-react-app doesn't use less: https://ant.design/docs/react/use-with-create-react-app

You can still add less through customizing webpack.

[kachkaev]

Ant design ships with both less files and css, the latter are a precompiled version of the shipped less styles. Basic setup instructions rely on using css files, which is simple, but does not allow theme customisation. Customising Theme involves loading less.

I love Next.js for giving app developers an option to configure webpack – this is what we are doing with Next.js 9.1 + next-css + next-less to get a customised Ant Design theme at the moment. Just saying that it it'd be great to see new recipes for less (and sass) files in some centralised place, just to avoid simple setup mistakes.

Note that by pushing Next.js into the community, you reduce developers’ average literacy in webpack matters, because it becomes just an implementation detail of an awesome higher-lever tool 😁 After using Next.js for a couple of years I personally fell much less confident in that I can configure webpack properly myself, and I guess I'm not alone here 😅 ≈5% of Next.js users may sound like a small proportion, but it must still be a big absolute figure given your scale 😉

[timneutkens]

Might consider investigating adding Less and maintaining support for it under enterprise support, then I can justify adding it long term. Feel free to email [email protected].

[timneutkens]

Closing this one as #10134 is more complete.

[Timer]

Sass support has been experimentally landed. We'd like feedback if you upgrade to next@canary!