Create-React-App中CSS背景图片路径报错：无法导入src外资源

嘿，我碰到过类似的情况，这就给你捋清楚问题出在哪以及怎么解决！

为什么会报错？ #

Create React App（CRA）有个默认规则：只能从src/目录下导入资源文件，目的是保持项目结构的规范性。你用的~/Screenshot_11.png里的波浪线~，在当前项目里没有被正确解析为src/目录的别名，反而被解析成了项目外的路径（错误提示里的../../../../../../../就是明证），所以触发了CRA的路径限制报错。

至于你之前的项目能用，大概率是之前的项目额外配置了Webpack别名，把~指向了src/——homepage配置是用来设置项目部署后的根路径的，和本地资源的路径解析完全没关系哦。

几种可行的解决方案 #

方案1：遵循CRA规范，用相对路径（最推荐）

把你的图片文件放到src/目录下，比如创建一个src/assets/images文件夹，把Screenshot_11.png放进去。然后根据你的main.scss的位置，用相对路径引用：
假设你的main.scss在src/styles/目录下，那么路径应该这么写：

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

这里的../是从styles目录回到src根目录，再进入assets/images找到图片，完全符合CRA的规则，不需要额外配置。

方案2：配置Webpack别名，保留~写法

如果你习惯用~来指代src/目录，可以通过修改Webpack配置实现，但CRA默认不允许直接改配置，需要借助react-app-rewired工具：

1. 先安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，添加别名配置：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '~': path.resolve(__dirname, 'src')
  })
);

3. 修改package.json里的启动脚本，把react-scripts替换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

这样之后，你写的url('~/assets/images/Screenshot_11.png')就会被正确解析为src/assets/images/Screenshot_11.png了。

方案3：使用public目录（不推荐，适合静态资源）

如果你的图片是不需要被Webpack处理的静态资源，可以放到项目根目录的public/文件夹下，然后用绝对路径引用：

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

注意这里的路径开头是/，会指向public目录的根。不过这种方法不推荐用于需要被Webpack优化（比如压缩、哈希命名）的图片资源。

总结 #

最省心的是方案1，完全贴合CRA的设计规范；如果坚持要用~就选方案2；静态资源才考虑方案3。

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