Next.js 13构建后Sass Modules样式不加载问题求助

核心结论 #

你不需要额外配置Webpack，Next.js 13已内置Sass Modules支持。样式在npm start（生产环境）丢失，大概率是构建流程、文件命名或引用方式的问题，而非Webpack配置缺失。

具体解决步骤 #

1. 确认Sass依赖正确安装 #

你的package.json中未显示sass依赖，即便你说已安装，建议重新执行：

npm install sass --save-dev

安装完成后，检查package.json的devDependencies中是否出现sass条目。

2. 严格遵循Sass Modules命名规范 #

Next.js要求模块化Sass文件必须以[name].module.scss或[name].module.sass命名：

• 正确示例：Card.module.scss
• 错误示例：Card.scss（会被识别为全局样式，无法模块化）

3. 验证组件内样式引用方式 #

确保组件中正确导入并使用模块化样式：

// 正确导入
import styles from './Card.module.scss';

export default function Card() {
  return <div className={styles.cardContainer}>内容</div>;
}

避免使用全局样式的导入方式（如import './Card.scss'），这会导致模块化失效。

4. 清理缓存并重新构建 #

构建缓存可能引发异常，执行以下命令彻底重置构建流程：

rm -rf .next
npm run build
npm start

5. 排查多样式方案冲突 #

你的项目同时使用了Emotion和MUI，需注意：

• 确认MUI的样式配置未覆盖Sass Modules的编译输出
• 避免在同一组件中混用Emotion的styled语法与Sass Modules，防止类名优先级冲突

内容的提问来源于stack exchange，提问作者saeed