Can not use CSS modules in Nextjs, Ant Design? - less

Question

I'm doing a NextJS project using Ant design, Less. But I can't use CSS modules with Less even when I add
cssModules: true,
Here my next.config.js
const withPlugins = require("next-compose-plugins");
const withLess = require('#zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')
)
module.exports = withLess({
cssModules: true,
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
},
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/
const origExternals = [...config.externals]
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback()
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback)
} else {
callback()
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
]
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
})
}
return config
},
})
index.js:
import styles from 'path-to-less.less'
<p className={styles.styleTab1} >Conntents </p>
but I it doesn't effect to my component.

Answer 1

Looks like this is a solution:
https://github.com/vercel/next.js/issues/8156#issuecomment-516009764
From my tries, this solution requires #zeit/next-less, #zeit/next-css, less, less-loader as dependencies 🤷🏽‍♂️.