Next.js中无法解析@/styles/globals.scss的报错解决咨询

以下是针对Module not found: Can't resolve '@/styles/globals.scss'报错的排查和解决步骤：

• 核对文件路径与命名
  确认项目中存在@/styles/globals.scss对应的实际文件：

  • 若项目有src目录，文件应位于src/styles/globals.scss；若无src目录，文件需放在项目根目录的styles/globals.scss下。
  • 注意文件名大小写（Linux/macOS系统对大小写敏感，避免写成Global.scss或global.scss），以及路径中的斜杠是否为正斜杠/。

• 配置路径别名（tsconfig.json/jsconfig.json）
  确保@别名已正确配置：

  1. 打开项目根目录下的tsconfig.json（TypeScript项目）或jsconfig.json（JavaScript项目）。
  2. 在compilerOptions中添加baseUrl和paths配置：

     {
       "compilerOptions": {
         "baseUrl": ".",
         "paths": {
           "@/*": ["src/*"] // 有src目录时用该配置；无src目录则改为["*"]
         }
       }
     }
     

  3. 保存配置后重启Next.js开发服务器，配置修改需重启才能生效。

• 安装sass依赖
  Next.js需要sass包解析scss文件，执行以下命令安装：

  npm install sass
  # 或 yarn add sass
  # 或 pnpm add sass
  

• 清除Next.js缓存
  缓存可能导致路径解析异常，执行以下操作：

  1. 删除项目根目录下的.next文件夹。
  2. 重新启动开发服务：npm run dev，或直接用next dev --no-cache跳过缓存启动。

• 检查导入语句
  确认_app.tsx中的导入语句无语法错误，应为：

  import '@/styles/globals.scss';
  

  避免引号错误、多余字符或路径拼写错误。

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