Docker挂载volume启动React容器时Sass导入报错问题排查

两个报错均由挂载路径冲突+残留卷复用+旧缓存命中共同导致：

1. 路径映射冲突：配置中.:/app会将宿主机当前目录全量挂载到容器/app路径，默认情况下/app/src可直接读取宿主机src目录内容；额外配置的./src:/web/src会将宿主机src目录单独挂载到容器内独立的/web路径下。而React应用、sass-loader、HMR服务默认以容器工作目录/app为根路径做相对路径解析，@import "./themes.scss"会直接从/app/src下查找目标文件，不会主动读取/web/src下的挂载内容，自然触发样式文件找不到的错误。
2. 匿名卷残留：/app/node_modules为匿名挂载卷，在新目录启动容器时，Compose会基于当前目录名生成新的项目标识，若旧容器关联的匿名卷未被彻底清理，会出现依赖缓存与当前镜像路径配置不匹配的问题，进一步干扰HMR和资源加载逻辑。
3. Service Worker异常：旧容器长期运行时，浏览器端SW缓存了历史版本的资源hash与路径，新容器启动后资源标识变化，SW预缓存资源拉取直接失败，抛出Failed to fetch错误。

• 彻底清理全量残留资源：先切换到最早启动该容器的旧代码目录，执行以下命令清理旧栈资源，再切换到新克隆的代码目录重复执行一次，确保无孤儿容器、残留匿名卷留存：

docker-compose down -v --remove-orphans

• 补全路径软链适配：由于需要保留./src:/web/src挂载配置，只需在容器启动时自动创建软链接，将/app/src指向挂载的/web/src路径，让所有以/app为根的路径解析都能命中挂载的源码文件。修改docker-compose配置中对应服务的启动命令即可，示例：

services:
  your-react-service: # 替换为你实际的服务名
    build: .
    volumes:
      - ".:/app"
      - "./src:/web/src"
      - "/app/node_modules"
    ports:
      - "3000:3000"
      - "35729:35729"
    # 新增启动命令，先建软链再启动应用
    command: sh -c "ln -sfn /web/src /app/src && npm start"

若你的启动命令不是npm start，替换为实际的项目启动命令即可，软链语句放在最前面用&&拼接。

• 清理浏览器端旧缓存：打开浏览器开发者工具，进入Application面板，找到Service Workers项，注销localhost:3000下所有已注册的SW；再进入Storage面板，点击「Clear site data」清除该站点下所有缓存数据，避免旧SW缓存干扰。
• 无缓存重新构建启动：

docker-compose build --no-cache
docker-compose up -d

容器启动后查看日志，sass-loader编译无导入错误，出现Compiled successfully提示后访问localhost:3000，页面正常加载；修改本地src目录下的任意样式、组件代码，可正常触发热更新，两类报错均不会复现。

若使用WSL2+Docker Desktop环境，需确保新克隆的代码仓库存放在WSL2自身文件系统内，不要放在/mnt/c等Windows挂载盘下，避免文件监听事件丢失、路径大小写匹配异常导致的偶发问题。

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