Create React App生成的应用程序的Sass文件中的相对img url问题

Question

这是我的文件夹结构：

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

以下是我的组件（App.js）的相关部分：

import './App.scss';

class App extends Component {

以下是我的Sass文件（App.scss）的相关部分：

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

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

我无法终生正确使用图标齿轮图像路径。

当我使用../img/icon-gear.png时，它会炸弹：

  

找不到模块：无法解析'/ Users / rob / develop / openbazaar / openbazaar-web / src / styles / components'中的'../ img / icon-gear.png'

当我使用../../img/icon-gear.png时，它会炸弹：

  

./ src / components / App.scss ...您试图导入../../img/icon-gear.png，它不在项目src /目录下。不支持src /以外的相对导入。

图像路径应该相对于什么的根路径？我认为它是src/components，因为这是此sass文件所在的位置，也是我从该文件顶部进行导入（@import '../styles/base.scss'）的位置。但是...不起作用（上面的第一个错误）。

在两个不同的错误消息之间似乎也存在不同的基本路径。

Answer 1

您的文件夹结构似乎不正确。

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

需要成为

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

更改后，Webpack应该正确识别相对路径。

还要确保您已在顶层安装了节点sass

npm install --save-dev node-sass