如何在Nextjs项目中高效集成Antd和SCSS并解决所有样式加载问题？

Question

我正在构建一个 Nextjs 项目，并将 Antd 用于 UI 组件，将 SCSS 用于样式。但是，我遇到了正确加载样式的问题。尝试了网上找到的几种解决方案，比如修改next.config.js文件，问题依旧。

我需要禁用 Next.js 内置 CSS 模块的加载。我尝试通过将 cssModules 设置为 false 来修改 next.config.js 文件，但样式仍然无法正确加载。

在 Next.js 项目中使用 Antd 和 SCSS 进行样式设置时，禁用 Next.js 内置 CSS 模块的最有效方法是什么？我需要安装任何特定的配置或依赖项吗？任何建议或指示将不胜感激。

Answer 1

最有效的解决方案

创建一个 next.config.js 添加这些配置

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;

创建 input.tsx 自定义组件

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;

创建一个 input.scss

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

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