React,Sass,从 .scss 文件导入 img 时出错 [英] React, Sass, getting an error when importing img from a .scss file
问题描述
我想从 sass 文件设置一个带有覆盖层的简单背景图像到反应组件,但我收到此错误,找不到模块:您试图导入 ../assets/hero.jpg 其中位于项目 src/目录之外.不支持src/之外的相对导入.
,这很奇怪,因为包含图像的assets文件夹实际上在/src
文件夹内,这是我的文件夹结构
I want to set a simple background image with an overlay to a react component from a sass file, but I am getting this error, Module not found: You attempted to import ../assets/hero.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
, this is very strange as the assets folder that contains the image is actually inside the /src
folder, here is my folder structure
src/
|assets/
hero.jpg
|sass/
|main.scss
|sassFiles/
|components.scss
|..
|components/
|Navbar.js
|Home.js
|..
|App.js
|index.js
|..
/* _components.scss file */
.hero {
height: 60vh;
background: linear-gradient(rgba(238, 238, 238, 0.459)), url(../../assets/hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
当我像这样从组件导入图像时import hero from '../assets/hero.jpg'
,它工作正常,仅当我从 .scss 文件导入它时才会出现错误,除此之外,样式应用没有问题.
when I import the image from the component like so import hero from '../assets/hero.jpg'
, it works fine,
the error occurs only when I import it from the .scss file, other than that, styles are being applied with no problems.
推荐答案
您在 Web 检查器中看到什么错误?尝试更改图像的相对路径:
What error are you seeing in the web inspector? Trying changing the relative path to your image from:
url(../../assets/hero.jpg)
致:
url(../assets/hero.jpg)
这篇关于React,Sass,从 .scss 文件导入 img 时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!