Relative img url issue in Sass file of Create React App generated app

Question

Here's my folder structure:

-- src
---- components
------ App.js
------ App.scss
---- img
------ icon-gear.png
---- styles
------ base.scss

Here are the relevant parts of my component (App.js):

import './App.scss';

class App extends Component {

Here are the relevant parts of my Sass file (App.scss):

@import '../styles/base.scss';

.App {
  .App-btnSettings {
    background-image: url('../img/icon-gear.png');
  }
}

I can't for the life of me get that icon-gear image path right.

When I use ../img/icon-gear.png it bombs with:

Module not found: Can't resolve '../img/icon-gear.png' in '/Users/rob/develop/openbazaar/openbazaar-web/src/styles/components'

When I use ../../img/icon-gear.png it bombs with:

./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.

What is the root path the image path should be relative to? I would think it's src/components because that's where this sass file is and that's also where I do the import (@import '../styles/base.scss') at the top of the file from. But... that doesn't work (first error above).

It also seems like there's a different base path between the two different error messages.

Answer 1

It looks like your folder structure is incorrect.

-- src
---- components
------ App.js
------ App.scss
-- img
---- icon-gear.png
-- styles
---- base.scss

Needs to be

-- src
---- components
------ App.js
------ App.scss
---- img
------ icon-gear.png
---- styles
------ base.scss

Webpack should correctly recognize relative paths once you change this.

Also make sure you have node sass installed at the top level

npm install --save-dev node-sass