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

Posted 2023-03-07

【中文标题】React，Sass，从 .scss 文件导入 img 时出错

【英文标题】：React, Sass, getting an error when importing img from a .scss file

【发布时间】：2019-05-05 23:15:08

【问题描述】：

我想设置一个简单的背景图像，并从 sass 文件中覆盖到反应组件，但是我收到了这个错误，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.，这很奇怪，因为包含图像的 assets 文件夹实际上在里面/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】：

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

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

收件人：

url(../assets/hero.jpg)

【讨论】：

这只会把我带到/sass文件夹，所以我仍然需要再回到src/然后进入assets文件夹，总之，我仍然得到同样的错误.无论如何，谢谢。

您在 main.scss 文件中导入您的 components.scss 文件，所以这是正确答案。

你说得对，非常感谢，抱歉回复晚了，干杯:)

我一直忘记所有的部分文件都被编译成 main.scss 中的一个大 scss 文件，所以路径确实是 ../