My folder structure looks like this:
-- src
---- components
------ App.js
------ App.scss
---- img
------ icon-gear.png
---- styles
------ base.scss
Let's dive into the relevant parts of my component file (App.js):
import './App.scss';
class App extends Component {
Now, let's take a look at the pertinent sections of my Sass file (App.scss):
@import '../styles/base.scss';
.App {
.App-btnSettings {
background-image: url('../img/icon-gear.png');
}
}
I'm having trouble getting the path for the icon-gear image right.
When I use ../img/icon-gear.png, it throws an error:
Module not found: Can't resolve '../img/icon-gear.png' in '/Users/rob/develop/openbazaar/openbazaar-web/src/styles/components'
And when I try ../../img/icon-gear.png, another error pops up:
./src/components/App.scss... You attempted to import ../../img/icon-gear.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
I'm puzzled about what the root path for the image should be relative to. I initially thought it should be src/components since that's where the sass file is and where I import the stylesheet (@import '../styles/base.scss'). However, that doesn't work (leading to the first error mentioned).
It seems there's inconsistency with the base path between the two error messages.