Create React App(TypeScript)中无需Webpack从CSS加载图片报错解决

问题本质 #

Create React App对TSX和CSS的资源路径解析逻辑存在差异：

• TSX中通过import引用public下的资源时，内置工具会自动处理路径映射，所以你在main.tsx里引用图片无报错
• CSS里的资源路径是相对于构建后的项目根目录，而非CSS文件所在位置，你之前使用的../public/asset/images/前缀不符合这个解析规则，才会导致模块找不到错误

直接解决方案 #

将CSS里的图片路径改为根相对路径（以/开头）：
假设你的图片路径是public/asset/images/bg.png，在CSS中这样编写：

.target-element {
  background-image: url('/asset/images/bg.png');
}

额外说明 #

• 无需修改Webpack配置（Create React App默认不允许直接修改Webpack配置），你之前添加的images.d.ts仅对TSX中的import语句生效，不影响CSS的资源解析
• 若修改路径后仍有加载问题，重启开发服务器并清除浏览器缓存即可

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