How to config next.js with css + less + scss

[RobinZhao00]

const withLess = require('@zeit/next-less') const withSass = require('@zeit/next-sass') module.exports = withLess(withSass({ // options }))

seems unfriendly to develops, are there any other actions can be applied

[SolidZORO]

Yes, the official plugin has expired and is no longer applicable to the new version of Next. js.

You can try next-plugin-antd-less , support Next.js v9.5.

---

Since Next.js 9.3 supports sass and css by default, but does not support less.

If you use Next.js > 9.3 and use the official less plugin, you will definitely encounter the following problems.

1. CIL Warning Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.

2. Does not support automatic recognition of css modules, e.g. a.module.less and a.less

---

To solve the above problems, my idea is very simple.

1. Find sassModule and copy onec and replace the sass-loader inside with less-loader.

2. Then enable the modules.auto option of css-loader. This can simply match all *.less (no need to match it is *.module.less or *.less), and hand it over to css-loader.

This is the lowest cost way, And CLI will no longer show this disgusting warning. The important thing is that there is Zero Dependency on other Next-Plugins..