Gatsby/React SASS背景图片 [英] Gatsby/React SASS Background-Image

问题描述

如何在全局SASS样式表中指定背景图片?在"src"文件夹中，我有一个"sass"文件夹，其中包含具有以下内容的样式表:

How to specify background image in global SASS stylesheet? Within the "src" folder I have a "sass" folder contain a stylesheet with the following:

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

"assets"文件夹与"sass"文件夹处于同一级别.除了上面的路径外，我还尝试使用"./"和"../../"无济于事.

The "assets" folder is on the same level as the "sass" folder. I addition to the path above, I have also attempted using "./" and "../../" to no avail.

错误:

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.

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中调用文件也会引发错误.

Calling import image from '../assets/test.jpg' alone, without calling the file from within SASS also throws the error.

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

I believe I've discovered the cause of the problem; my include: value is not properly configured. Currently, I have all of my media files located within this /assets/ folder, and so it seems they are all being compiled as .svg files.

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

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

Plugin issue is addressed at the bottom of its documentation. https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg/?=gatsby-plugin-react-svg

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

Solved by renaming svg files and updating plugin settings include: /\.inline\.svg$/.

推荐答案

尽管以下解决方案确实可以工作，但由于将资产直接导入文件和使用静态文件夹文档页面.

While the below solution does work, it is not ideal for the reasons described in the Importing Assets Directly Into Files and Using the Static folder docs pages.

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

Importing assets directly has these benefits for image and font files:

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

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

After OP added update about gatsby-plugin-react-svg misconfiguration causing the issue I went back and tried using an assets folder in src instead of static at the root level and everything works fine.

原始答案:

在将资产直接导入文件docs页面中，您链接到您的评论，它在顶部显示:

In the Importing Assets Directly Into Files docs page you link to in your comment it says up top:

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

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

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg

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

You can then refer to it in your stylesheet like so:

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

话虽如此，这里还有另一个类似的问题 OP用一种更为复杂的解决方案回答了他们自己的问题，但是如果我要回答这个问题，我建议他们将fonts文件夹移到Static文件夹中，并采用与上述类似的方法.

All that said, there is another similar question here where the OP answers their own question with a much more complicated solution, but if I were to answer that one I would suggest they move the fonts folder into the Static folder and follow a similar approach to the one outlined above.

这篇关于Gatsby/React SASS背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！