Create React App 4.0 无法解析公共文件夹中的图像路径

Question

我已经升级到最新的 Create React App 4.0。现在scss无法解析公共文件夹中的图像资产。我之前使用的是 CRA 3.4.1。它工作得很好。

有任何想法吗？我不想使用npm eject

icon.svg 在 public/images

background-image: url(/images/icon.svg);

Failed to compile.

./src/Components/style.scss 
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''

在 Create React App 3.x 中，从(S)CSS 中的公共文件夹中引用图像只需使用起始斜杠即可，如已回答here。

正如 OP 所解释的那样，图像在public/images并被引用为url(/images/icon.svg).

这不再适用于 Create React App 4.0.0 并给出错误消息Error: Can't resolve '../../../../../../icon.svg' in ''。Create React App的更新日志没有提到有关公共文件夹的重大更改。

Answer 1

作为临时解决方法，您可以将图像移动到src/，将它们直接导入到组件中import myImage from '../file.svg'并设置style={{ backgroundImage: file }}>?