React项目嵌套SCSS导入开发正常生产失败问题求助

问题分析 #

开发环境SCSS导入正常，但生产构建时出现Can't find '../variables/colors'错误，核心原因是开发与生产环境的SCSS编译逻辑差异，以及默认webpack配置未适配嵌套导入的路径解析。

疑问解答 #

1. 开发与生产环境差异的原因 #

react-scripts的开发环境使用style-loader将SCSS编译后注入JS，路径解析规则更宽松，且devServer会实时追踪所有依赖文件；生产环境则用mini-css-extract-plugin提取独立CSS文件，对路径解析的严谨性要求更高。另外你使用的node-sass已停止维护，其路径解析在生产构建场景下存在已知兼容性问题，这也是差异出现的关键因素。

2. 是否缺少特定webpack配置 #

是的，默认react-scripts配置未给sass-loader设置includePaths，导致嵌套导入的相对路径在生产构建时无法正确解析。需要手动添加SCSS根目录到解析路径中，让所有嵌套导入都能基于根目录查找文件。

3. 与监听进程的关系 #

开发环境的监听进程会自动递归追踪所有嵌套依赖，即使路径解析有微小瑕疵也可能被兼容；生产构建是一次性编译流程，没有实时监听机制，依赖解析错误会直接暴露。本质不是监听进程未检测到依赖，而是生产构建的解析逻辑更严格。

解决方案 #

1. 替换node-sass为sass（推荐） #

node-sass已废弃，dart-sass（即npm包sass）的路径解析更稳定，完全兼容react-scripts 5.0.1：

npm uninstall node-sass && npm install sass

2. 用craco自定义webpack配置（无需eject） #

1. 安装craco：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js：

const path = require('path');

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        sassOptions: {
          // 指定SCSS根目录，嵌套导入可直接基于此路径
          includePaths: [path.resolve(__dirname, 'src/styles')],
        },
      },
    },
  },
};

3. 修改package.json的脚本命令：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

3. 统一导入路径（可选） #

设置includePaths后，可简化嵌套导入的路径，比如_button.scss中直接写：

@import 'variables/colors';

无需再用相对路径，彻底避免路径层级错误。

4. 检查大小写一致性 #

生产环境（通常是Linux服务器）对文件路径大小写敏感，开发环境（Windows）则不敏感。确保所有导入路径的大小写与实际文件完全一致，比如_colors.scss不能写成_Colors.scss。

内容的提问来源于stack exchange，提问作者Windows Metafile LOL