How to efficiently integrate Antd and SCSS in a Nextjs project and resolve all style loading issues?

Question

I am building a Nextjs project and using Antd for UI components and SCSS for styling. However, I am encountering issues with loading the styles properly. I have tried several solutions found online, such as modifying the next.config.js file, but the issue persists.

I need to disable the loading of Next.js's built-in CSS modules. I have tried modifying the next.config.js file by setting cssModules to false, but the styles are still not loading correctly.

What is the most efficient way to disable Next.js's built-in CSS modules while using Antd and SCSS for styling in a Next.js project? Are there any specific configurations or dependencies that I need to install? Any suggestions or pointers would be greatly appreciated.

Answer 1

The best solution that worked for

Create a next.config.js add those config

const path = require('path')
const nextConfig = {
  sassOptions: { // loading scss for next 13.0.0
    fiber: false,
    includePaths: [path.join(__dirname, 'styles')],
  },
  webpack: (config, { isServer }) => { 
    config.module.rules.forEach((rule) => {
      const { oneOf } = rule;
      if (oneOf) {
        oneOf.forEach((one) => {//Disable css module loading 
          if (!`${one.issuer?.and}`.includes('_app')) return;
          one.issuer.and = [path.resolve(__dirname)];
        });
      }
    })
    return config;
  },
};


module.exports = nextConfig;

Create input.tsx custom component

import React from 'react';
import { Input } from 'antd';
import './input.scss'
const App: React.FC = () => <div className='custom-input-div'>
<Input placeholder="Basic usage" />
</div>;

export default App;

Create an input.scss

// .custom-input-div{
//     .ant-input{
//         background-color: aqua;
//     }
// }

.custom-input-div{
    .custom-input{
        &.ant-input{
             background-color: aqua;
                }
    }
}