title: Can not use CSS modules in Nextjs, Ant Design?
body: <p>I'm doing a NextJS project using Ant design, Less. But I can't use CSS modules with Less even when I add  </p>
  
  <blockquote>
    <p>cssModules: true,</p>
  </blockquote>
  
  <p>Here my next.config.js</p>
  
  <pre><code>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 }) =&gt; {
  
          if (isServer) {
              const antStyles = /antd\/.*?\/style.*?/
              const origExternals = [...config.externals]
              config.externals = [
                  (context, request, callback) =&gt; {
                      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
      },
  })
  </code></pre>
  
  <p>index.js:</p>
  
  <pre><code> import styles from 'path-to-less.less'
  
  
  &lt;p className={styles.styleTab1} &gt;Conntents &lt;/p&gt;
  </code></pre>
  
  <p>but I it doesn't effect to my component. </p>