如何通过CSS Module访问React项目的public文件夹？

这个问题其实挺常见的，核心原因是你用了相对路径去访问public文件夹里的资源，但CSS Module的相对路径是基于它所在的src/components/styles目录来解析的，自然找不到public下的图片。给你个简单且标准的解决方法：

• 直接使用绝对路径指向public文件夹：React项目构建后，public文件夹下的资源会被直接放到项目根目录，所以你可以直接用根路径开头的地址来访问它。

修改你的App.module.css里的样式代码：

.Container {
  background: url("/images/Background.png");
}

这样写之后，React会自动定位到public文件夹下的images/Background.png文件，就不会再出现找不到资源的错误了。

额外补充个小细节：如果你的项目未来部署在子目录下（比如https://example.com/my-app/），只需要先在public/index.html里设置<base href="/my-app/">，或者在package.json中添加"homepage": "/my-app/"，之后依然可以用/images/Background.png这样的路径，React会自动适配部署路径。

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