使用RsBuild构建ReactJS项目时遇png模块找不到错误求助

可能的原因及解决方案 #

• 确认静态资源存放路径
  RsBuild默认将项目根目录下的public文件夹作为静态资源目录，所有放在这里的文件可以通过根路径（/xxx）直接访问。请确保background.png文件存放在public目录下，若没有该目录，直接在项目根目录新建public文件夹并放入图片。

• 检查RsBuild的静态资源配置
  如果你自定义了静态资源目录，需要在rsbuild.config.js中配置publicDir字段，确保路径匹配：

  export default {
    source: {
      publicDir: './your-custom-public-folder',
    },
  };
  

• 清理构建缓存后重启服务
  缓存可能导致资源解析异常，执行以下命令清理缓存后重新启动开发服务：

  rsbuild clean
  rsbuild dev
  

• 调整src目录内资源的引用路径
  如果图片放在src目录中，不能用根路径/引用，需要使用相对路径（比如../assets/background.png，根据文件实际层级调整），或者通过~前缀引用（RsBuild支持~指向src目录）：

  background-image: url('~assets/background.png');
  

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