盖茨比/react SASS 背景图像

IT技术 reactjs sass gatsby
2021-05-25 01:43:07

如何在全局 SASS 样式表中指定背景图像？在“src”文件夹中，我有一个“sass”文件夹，其中包含一个具有以下内容的样式表：

background-image: url(../assets/test.jpg)

“assets”文件夹与“sass”文件夹位于同一级别。除了上面的路径，我还尝试使用“./”和“../../”但无济于事。

错误：

ERROR in ./src/assets/test.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.

import image from '../assets/test.jpg'单独调用，而不从 SASS 内部调用文件也会引发错误。

我相信我已经发现了问题的原因；我的include:值没有正确配置。目前，我的所有媒体文件都位于此/assets/文件夹中，因此它们似乎都被编译为.svg文件。

{
  resolve: `gatsby-plugin-react-svg`,
  options: {
    rule: {
      include: /assets/
    }
  }
}

插件问题已在其文档底部解决。 https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/?=gatsby-plugin-react-svg

通过重命名 svg 文件和更新插件设置解决include: /\.inline\.svg$/。

1个回答

编辑： 虽然以下解决方案确实有效，但由于将资产直接导入文件和使用静态文件夹文档页面中描述的原因，它并不理想。

直接导入资产对图像和字体文件有以下好处：

  • 缺少文件会导致编译错误，而不是用户的 404 错误。
  • 结果文件名包含内容哈希，因此您无需担心浏览器缓存其旧版本。

在 OP 添加有关gatsby-plugin-react-svg导致问题的错误配置的更新后，我回去尝试使用assets文件夹src而不是static在根级别，一切正常。

原答案：

在将资产直接导入文件文档页面中，您在评论中链接到它上面说：

有两种主要方法可以将图像、字体和文件等资产导入 Gatsby 站点。默认路径是将文件直接导入 Gatsby 模板、页面或组件。对于某些边缘情况有意义的替代路径是使用静态文件夹。

您可以在项目的根目录下创建一个名为 static 的文件夹。您放入该文件夹中的每个文件都将复制到公用文件夹中。例如，如果您将名为 sun.jpg 的文件添加到静态文件夹中，它将被复制到 public/sun.jpg

然后，您可以在样式表中引用它，如下所示：

body {
  background-image: url(/puppy.jpg);
}

综上所述，这里还有另一个类似的问题，其中 OP 用一个更复杂的解决方案回答了他们自己的问题，但是如果我要回答那个问题，我建议他们将 fonts 文件夹移动到 Static 文件夹中并遵循类似的方法上面概述的那个。

其它你可能感兴趣的问题
上一篇module appregistry 不是注册的可调用module（调用 runApplication） 下一篇床调平方法不适用于 Repetier 固件 0.92.9？