create-react-app 中来自 CSS 的公共文件夹中的参考文件

IT技术 node.js reactjs create-react-app
2021-05-03 05:44:11

我正在使用 creat-react-app (CRA) 并且只想通过 CSS 包含一个放置在公共文件夹中的 png 文件（我将所有图像文件都保存在那里）。现在我正在尝试通过 CSS 引用此图像（我只将该background-image行添加到新生成的 CRA 应用程序中）：

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

You attempted to import example.png which falls outside of the project src/ directory

如何从 CSS 文件中引用图像文件而不复制其中的某处/src？我也不想弹出应用程序并摆脱错误消息。

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

4个回答

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

所以对于上面提出的问题：

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

关键部分是

/example.png

指的是位于 public 文件夹中的文件 example.png（在根级别提供服务）

也可以是相对的：

一个也可以使用

./example.png

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

就我而言，要从 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/

删除..相对路径中的额外内容。:)

使用"./image.png".

背后的逻辑是，css您将在其中放置代码的文件将成为index.html应用程序完成、构建和部署时的一部分。

其它你可能感兴趣的问题
上一篇useEffect 依赖数组和 ESLint Exclusive-deps 规则 下一篇设置 webpack 以通过 HTTPS 在自定义域上本地运行