Next.js应用部署cPanel后SCSS样式失效，求解决办法

AI 小北

2026-8-8

Next.js部署cPanel后SCSS样式不生效的解决思路

常见排查与修复步骤

确认构建产物上传正确
本地必须先执行npm run build完成生产构建，上传到cPanel的应该是构建后的.next目录（或静态导出的out目录），而非源码文件。如果用静态导出，需在next.config.js里添加配置：
```
module.exports = {
  output: 'export',
}
```
重新构建后把out目录传到cPanel网站根目录。
检查SCSS模块命名与导入
用CSS模块的话，文件名必须是[name].module.scss格式，导入时要正确引用：
```
import styles from './Component.module.scss';
```
注意cPanel文件系统区分大小写，本地忽略的大小写错误会导致部署后样式文件找不到。
清理cPanel缓存并配置缓存规则
cPanel的缓存可能留存旧资源，先在「缓存管理器」清空网站缓存。然后在网站根目录的.htaccess（没有就新建）里添加静态资源缓存规则：
```
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>
```
验证文件权限
确保.next/static/css或out/_next/static/css下的CSS文件权限设为644，目录权限设为755，服务器才能正常读取这些样式文件。
排除代码配置问题
本地运行npm run start模拟生产环境，如果样式也不生效，说明是代码或Next.js配置问题：比如13+ App Router的样式导入方式错误，或者自定义webpack配置干扰了SCSS loader，建议暂时移除自定义webpack配置重新测试。