Next.js中pages目录导入SCSS文件报Global CSS cannot be imported错误的求助

嘿，这个问题我之前踩过坑，核心原因其实是文件名的小疏漏导致Next.js把你的CSS Modules当成全局CSS处理了！

问题根源 #

Next.js对CSS Modules的识别规则很严格：必须使用 [name].module.scss（注意是单数的module）命名格式。你现在的文件名叫home.modules.scss（复数的modules），这会让Next.js误以为这是全局CSS文件。而Next.js的规则明确要求：pages目录下除了_app.tsx之外的文件，不能导入全局CSS，所以才会抛出这个错误。

至于其他文件夹的页面能正常导入，是因为Next.js的全局CSS限制仅针对pages目录下的文件，其他自定义目录没有这个严格约束，所以即使文件名写错也不会触发报错。

解决步骤 #

1. 重命名SCSS文件：把src/pages/home.modules.scss改成src/pages/home.module.scss（把复数的modules改成单数module）
2. 更新导入语句：在index.tsx中把导入代码改成：

   import styles from './home.module.scss';
   

3. 重启开发服务：关掉当前的yarn dev进程，重新执行yarn dev，确保缓存被清空，新的文件名规则生效。

这样修改后，Next.js就能正确识别这是CSS Modules文件，你也能正常在pages目录的index.tsx中使用样式了。

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