[英]React, Sass, getting an error when importing img from a .scss file
我想从sass文件中设置一个简单的背景图像,其上覆盖有一个React组件,但出现此错误, 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.
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.
,这很奇怪,因为包含图像的资产文件夹实际上位于/src
文件夹中,这是我的文件夹结构
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文件中导入图像时才会发生错误, import hero from '../assets/hero.jpg'
,还应用了样式没有问题。
您在网络检查器中看到什么错误? 尝试从以下位置更改图像的相对路径:
url(../../assets/hero.jpg)
至:
url(../assets/hero.jpg)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.