React,Sass,从.scss文件导入img时出错

时间:2018-12-04 13:51:02

标签: reactjs sass

我想从一个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.,这很奇怪,因为包含该图像的资产文件夹实际上是在/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文件导入错误时,才会发生该错误,除此之外,样式的应用没有问题。

1 个答案:

答案 0 :(得分:1)

您在网络检查器中看到什么错误?尝试从以下位置更改图像的相对路径:

url(../../assets/hero.jpg)

收件人:

url(../assets/hero.jpg)