如何在 scss 文件中的 react-static 构建中设置图像的 url

Posted 2023-03-06

【中文标题】如何在 scss 文件中的 react-static 构建中设置图像的 url

【英文标题】：How to set url for images in react-static build in scss file

【发布时间】：2021-07-06 08:43:43

【问题描述】：

我正在将我的 React 站点迁移到 react-static。我在 scss 文件中有一个 css，我在我的项目中使用 react-static-plugin-sass。如何为我的 scss 文件中的图像正确设置 URL？

我试过了：

.my-page 
  color: rgb(70, 81, 116);
  &_header 
    border: 1px solid #000;
    background-image: url(/assets/images/bg-illustration.jpg);
  

但是当我运行该站点时，它给了我以下错误：

无法获取 /assets/images/bg-illustration.jpg

我的资产位于 src 文件夹中：

-src
--assets
---images
----bg-illustration.jpg

似乎scss文件中提到的所有图像都没有复制到带有资产的结果文件夹中。

如果我能提供任何关于如何在 react-static 构建中修复它的信息，我将不胜感激。

【问题讨论】：

使用相对路径可能会有所帮助。

【参考方案1】：

正如 Eusbolh 在 comment 中提到的，您需要对 URL 使用 相对 路径。例如：

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

请注意，当我们以/ 开始路径时，例如/foo/bar.png，它会尝试从public 目录中读取图像。

【讨论】：

感谢您的输入，但不幸的是它不起作用，如果我删除“/”它会给出错误“ModuleNotFoundError: Module not found: Error: Can't resolve /path to image/” .唯一的一种方法是如何使用带有“/”的路径编译它而不会出错，但在这种情况下没有图像

这里是回购：github.com/annmirosh/react-static-test