How to configure Next.js with Antd / Less and Sass / CSS modules

Question

I want to use Next.js with Sass and CSS modules but also want to use Ant Design and wanted to use the Less styles for smaller building size.

I'm able to enable either CSS modules or Less loader but not both at the same time. The examples from Next.js were not helping me complete that problem.

Answer 1

@zeit/next-less is deprecated and disables Next's built in CSS support. It also uses a very old version of less and less-loader.

I created a package that injects Less support to Next.js by duplicating the SASS rules and setting them for Less files and less-loader. It works with webpack5 flag.

https://github.com/elado/next-with-less

https://www.npmjs.com/package/next-with-less

Answer 2

While the above answers may work for versions of NextJS lower than 11, they do not work for 11+. I've found excellent success with the following plugin...

https://github.com/SolidZORO/next-plugin-antd-less

Answer 3

I am using elado's package which is - https://github.com/elado/next-with-less

you will need less and less-loader as dependencies. after that create a global.less file on styles folder. so it's like ,root> style > global.less and paste this code

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less'; 
@primary-color: #ff9b18; 
@border-radius-base: 20px;

and add below code in your next.config.js file which you will create on your root folder.

   // next.config.js
const withLess = require("next-with-less");

module.exports = withLess({
    lessLoaderOptions: {
        /* ... */
    },
});

Answer 4

In our project, there were old scss and css files. They were not using the Next js guidline for CSS modules. So I had to override webpack.config.js. So that works fine. But when we moved the file to the monorepo shared package, babel was not transpiling them. I used the below things, but those did not work for SCSS modules without a .module extension.

• next-transile-module.
• experimental: { externalDir: true, } in next Js config with root babel.cofig.json

Finally symlink hack worked for external shared files

Use symlinks for shared folder by updating next.config.js

module.exports = {
  //...
  resolve: {
    symlinks: false,
  },
};