如何解决Next.js项目中_app.tsx导入scss文件时出现的“Module not found: Can't resolve '../styles.globals.scss'”错误？

别急，我来帮你一步步排查这个模块找不到的问题——Next.js里SCSS导入的小坑确实容易让人卡壳，咱们从最基础的地方开始查：

1. 先揪出最容易犯的低级错误：路径和文件名 #

首先别小看拼写错误，这是最常见的原因：

• 检查文件名：你写的是../styles.globals.scss，是不是应该是../styles/globals.scss（多了个斜杠，把文件夹和文件名分开）？或者是不是文件名是global.scss少了个s？
• 注意大小写：如果你用的是Mac/Linux系统，文件名区分大小写，比如Globals.scss和globals.scss是两个不同的文件，Windows不区分，但部署到Linux服务器会出问题，最好统一小写。
• 验证相对路径：打开VSCode，在_app.tsx里输入../，看看编辑器的路径提示能不能自动补全到目标SCSS文件。如果补全不了，说明路径肯定错了——比如你的_app.tsx在pages/_app.tsx，如果globals.scss在项目根目录的styles文件夹里，正确路径应该是../styles/globals.scss。

2. 确认SCSS依赖是否正确安装 #

Next.js本身不自带SCSS解析器，必须安装sass包（注意不是已经废弃的node-sass）：

• 运行命令安装：

  npm install sass
  # 或者用yarn
  yarn add sass
  

• 安装完成后一定要重启开发服务器，有时候依赖更新后不重启会导致解析失败。

3. 检查Next.js配置文件（next.config.js） #

如果是自定义了SCSS的解析配置，可能会影响路径解析：

• 如果你用的是Pages Router（pages文件夹结构），默认支持SCSS，但如果配置了sassOptions，确保includePaths包含你的styles文件夹：

  const path = require('path');
  
  module.exports = {
    sassOptions: {
      includePaths: [path.join(__dirname, 'styles')],
    },
  };
  

  配置后，你可以直接用@import 'globals.scss';导入，不用写相对路径，避免路径出错。

4. 确认文件真的存在，没被误删或忽略 #

• 手动去对应的目录找这个SCSS文件，是不是不小心删除了？或者后缀写成了.css而不是.scss？
• 检查.gitignore文件，有没有把styles文件夹或者SCSS文件排除掉？如果被忽略了，可能在某些环境下文件不会被加载。

5. 清除缓存，重启开发服务器 #

Next.js的缓存有时候会搞鬼，导致模块解析异常：

• 运行命令清除缓存并重启：

  npm run dev -- --clear-cache
  

• 或者手动删除项目根目录的.next文件夹，然后重新启动开发服务器。

6. 检查TypeScript配置（如果是TS项目） #

如果你的项目用了TypeScript，确认tsconfig.json的include数组包含了SCSS文件：

{
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.scss"]
}

虽然SCSS不需要TypeScript编译，但配置不对可能会影响模块解析的逻辑。

如果以上方法都试过还是不行，建议你新建一个干净的Next.js测试项目，导入SCSS文件看看能不能正常工作——如果新项目没问题，说明你的原项目可能有其他配置冲突，比如第三方插件、自定义webpack配置干扰了SCSS的解析。

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