CRA4升级至CRA5后SCSS导入触发webpack无效依赖警告

问题根因 #

react-scripts@5 内置Webpack 5，对loader/插件上报的依赖路径做了强制绝对路径校验。你遇到的冒号拼接格式的无效路径（比如node_modules:src:src/scss/xxx），不是SCSS导入语句写错导致的，是内置的sass-loader和resolve-url-loader默认配置不兼容：多层嵌套导入SCSS文件时，两个loader会把多个include路径做错误拼接，把非绝对路径上报给Webpack触发警告，这个问题不会影响正常运行，但会破坏热更新监听和构建缓存。
你之前尝试的修改@import写法、加后缀、加~前缀的方案都不生效，原因是这些操作只调整了Sass本身的文件查找逻辑，没有解决loader上报路径错误的核心问题。

修复步骤 #

• 先获取完整错误日志，避免盲目排查。运行编译命令时把全量日志输出到本地文件，不要被默认截断的前3条错误误导：

# npm用户
npm start 2>&1 | tee scss-debug.log
# yarn用户
yarn start 2>&1 | tee scss-debug.log

编译完成后直接在生成的scss-debug.log里搜索The following invalid values have been reported字段，就能拿到所有出问题的文件路径，确认修复进度。

• 覆盖Webpack中SCSS对应loader的配置，从根源解决路径拼接问题。如果你用craco/react-app-rewired做配置覆写，直接加入如下规则；如果没有额外配置工具，可以先安装craco替换package.json里的react-scripts启动命令，成本最低：

// craco.config.js 放在项目根目录
const path = require('path');
module.exports = {
  webpack: {
    configure: (config) => {
      // 找到SCSS处理规则
      const scssRule = config.module.rules
        .find(rule => Array.isArray(rule.oneOf))
        .oneOf.find(rule => rule.test?.toString().includes('scss|sass'));
      
      // 修正sass-loader配置
      const sassLoader = scssRule.use.find(item => item.loader?.includes('sass-loader'));
      sassLoader.options = {
        ...sassLoader.options,
        addBuildDependencies: false, // 关闭sass-loader默认的依赖上报，避免路径拼接错误
        sassOptions: {
          ...sassLoader.options.sassOptions,
          includePaths: [
            path.resolve(__dirname, 'src'),
            path.resolve(__dirname, 'node_modules')
          ] // 固定全局查找路径，避免嵌套导入时路径解析混乱
        }
      };

      // 修正resolve-url-loader配置，强制上报绝对路径
      const resolveUrlLoader = scssRule.use.find(item => item.loader?.includes('resolve-url-loader'));
      resolveUrlLoader.options = {
        ...resolveUrlLoader.options,
        absolute: true,
        root: path.resolve(__dirname, 'src')
      };

      return config;
    }
  }
};

• 清理缓存后重新验证。删除项目下的node_modules/.cache目录，重新执行启动/构建命令，警告就会完全消失。如果还有零星警告，检查对应SCSS文件的导入语句，统一去掉~前缀（Webpack5下sass-loader已经不需要~标识node_modules路径），对于uikit这类第三方库的全局mixin文件，直接在入口index.scss最顶部引入一次即可，不要在子级SCSS文件里重复嵌套导入。

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