Gatsby/React SASS 背景图片答案

【问题标题】：Gatsby/React SASS Background-ImageGatsby/React SASS 背景图片
【发布时间】：2019-09-25 17:15:39
【问题描述】：

如何在全局 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$/解决。

【问题讨论】：

你有加载器来处理 webpack.config.js 中来自 sass 的 .jpg 吗？
@Pio 直接从 js 文件调用时收到相同的错误。查看更新。
我在导入字体文件时遇到了同样的问题。（意外字符'�'）所以看起来有点奇怪。向我们展示你的 webpack.cofnig.js。并仔细检查您是否加载了好的文件
您好，您是否碰巧在 gatsby-node.js 中修改了 webpack 设置或使用了任何可能这样做的插件？
@DerekNguyen 添加的插件列表。据我了解，Gatsby 已配置 Webpack 以处理 jpg、gif、svg 等资产。gatsbyjs.org/docs/importing-assets-into-files/…

标签： reactjs sass gatsby

【解决方案1】：

编辑： 虽然以下解决方案确实有效，但由于 Importing Assets Directly Into Files 和 Using the Static folder 文档页面中所述的原因，它并不理想。

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

缺少文件会导致编译错误，而不是您的用户的 404 错误。

结果文件名包含内容哈希，因此您无需担心浏览器缓存其旧版本。

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

原答案：

在您链接到your comment 的Importing Assets Directly Into Files docs page 中，它在顶部显示：

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

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

然后您可以像这样在样式表中引用它：

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

话虽如此，还有另一个similar question here OP 用更复杂的解决方案回答了他们自己的问题，但如果我要回答这个问题，我建议他们将字体文件夹移到静态文件夹中并按照与上述方法类似。

【讨论】：