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... 您试图导入位于项目 src/ 目录之外的 ../../img/icon-gear.png。不支持 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应该正确识别相对路径。

还要确保您在顶层安装了 Node sass

npm install --save-dev node-sass