create-react-app中CSS的公用文件夹中的引用文件

Question

我正在使用creat react app（CRA），只想通过CSS将一个png文件放在公共文件夹中（我把所有图像文件都放在那里）。现在我正试图通过CSS引用这张图片（我只在新生成的CRA应用程序中添加了背景图片行）：

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("../public/example.png");
}

您试图导入示例。不属于项目src/目录的png

如何从CSS文件中引用图像文件，而不复制/src中的某个地方？我也不想弹出应用程序并删除错误消息。

编辑：这个问题不同于src目录之外的create react app imports限制，因为它没有显示如何在CSS级别解决这个问题。建议的解决方案是在JavaScript文件中添加我不想做的样式。

Answer 1

官方文档中有一个关于/public文件夹的特殊页面：
https://create-react-app.dev/docs/using-the-public-folder/

以下是您应该如何引用公用文件夹：

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

或

render() {
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

但是，您不能在css文件中使用这些解决方案。因此，您必须从js文件中精确地重新源代码：

const MyComp = () => {
  return <div style={{ backgroundImage: `${process.env.PUBLIC_URL}/img/logo.png` }} />;
}

Answer 2

在我的例子中，要从css/scss访问图像，必须将图像目录和字体移动到src目录。之后我可以直接在css/scss文件中引用它们，

 background-image: url("/images/background.jpg");

参考资料：

https://github.com/facebook/create-react-app/issues/829

https://create-react-app.dev/docs/using-the-public-folder/

Answer 3

只需在名称前使用/即可，这将使其相对于输出根目录，其中包括公用文件夹中的任何内容（前提是完成的托管应用程序位于域的根目录下）。

因此，对于上述问题：

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("/example.png");
}

关键在于

/example.png 

引用公用文件夹中的文件，example.png（在根级别提供服务）

也可能是相对的：

也可以用

./example.png

如果css文件也是从public/build目录导入的，这将是相对于css文件的，不依赖于在域根目录下提供服务，但通常在CRA webpack中会捆绑CSS，它可能会也可能不会从该位置加载。（您可以使用带有%PUBLIC_URL%/Styles.css宏的rel标记直接将其导入html文件中）