如何在Next.js项目中集成Antd与SCSS并禁用内置CSS模块解决样式问题

1. 确认依赖安装 #

首先确保已安装SCSS编译所需依赖：

npm install sass --save-dev
# 或 yarn
yarn add sass -D

2. 修正next.config.js配置 #

Next.js 12+版本中，禁用CSS模块的正确配置项是css.modules（而非旧版的cssModules），完整配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  css: {
    modules: false, // 完全禁用CSS模块，所有.scss/.css文件均按全局样式处理
  },
  // 针对Antd v5的必要配置（避免样式加载异常）
  transpilePackages: ['antd'],
}

module.exports = nextConfig

注：若你仅希望不带.module.scss后缀的文件作为全局样式，其实Next.js默认就是此逻辑，无需额外禁用模块，只需确保自定义样式文件名不含.module即可。

3. 调整样式加载顺序（解决Antd与自定义样式冲突） #

在全局入口文件中优先加载Antd样式，再导入自定义SCSS：

• 若使用Pages目录：在pages/_app.js中配置

import 'antd/dist/reset.css'; // Antd v5用此路径，v4请用'antd/dist/antd.css'
import '../styles/global.scss'; // 你的全局SCSS文件
import { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

• 若使用App目录：在app/layout.js中配置

import 'antd/dist/reset.css';
import '../styles/global.scss';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

4. 清除缓存并重启服务 #

Next.js的缓存可能导致配置不生效，执行以下操作：

# 删除.next缓存目录
rm -rf .next
# 重启开发服务器
npm run dev

5. 排查其他冲突点 #

• 检查是否存在自定义PostCSS配置（postcss.config.js），避免其中规则干扰全局样式加载；
• 若使用Antd按需加载插件（babel-plugin-import），确保配置未强制启用CSS模块：

  // .babelrc 或 babel.config.js
  {
    "plugins": [
      ["import", { "libraryName": "antd", "style": true }]
    ]
  }
  

内容的提问来源于stack exchange，提问作者Mr. Durga prasad patra