Question

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

Answer 1

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

直接导入资产可为图像和字体文件带来以下好处：

缺少文件会为您的用户造成编译错误，而不是404错误。

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

OP添加了有关gatsby-plugin-react-svg配置错误导致问题的更新后，我回过头来尝试在根目录级别使用assets中的src文件夹而不是static，一切正常很好，因此我将其提升到了master分支，并将原始代码留在了static folder分支中。更新了以下链接，使其指向static folder分支，以避免造成进一步的混乱。

原始答案：

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

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

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

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

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

如果您访问rdela/gatsby-using-sass-static on GitHub，则可以看到所有这些信息。我分叉了Using gatsby-plugin-sass示例和added an image to the Static folder，然后将其设置为body background image in the stylesheet。

我将其部署在gatsby-sass-static.netlify.com。

所有这些，还有另一个similar question here，其中OP用一个更加复杂的解决方案来回答他们自己的问题，但是如果我要回答那个问题，我建议他们将fonts文件夹移到Static文件夹，然后遵循与上述类似的方法。

Gatsby / React SASS背景图片

1 个答案: