1

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;
}

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.

MoSwilam
  • 824
  • 2
  • 10
  • 26

1 Answers1

3

What error are you seeing in the web inspector? Trying changing the relative path to your image from:

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

To:

url(../assets/hero.jpg)
keyboard-warrior
  • 324
  • 2
  • 11
  • this takes me to the `/sass` folder only, so i still need to go back one more step to the `src/` then enter the assets folder, in short, I am still getting the same error. thanks anyway. – MoSwilam Dec 04 '18 at 17:07
  • 5
    You are importing your components.scss file in your main.scss file, so this is the correct answer. – tsg Dec 06 '18 at 18:02
  • 1
    You are correct, thanks very much, sorry for the late response, cheers :) – MoSwilam Dec 22 '18 at 22:37
  • 1
    I keep forgetting that all the partial files get compiled into one big scss file in the main.scss, so indeed the path is ../ – OctaviaLo Jul 05 '19 at 11:53