SASS 相对 url 配置错误

Question

我正在研究 React 项目，但在使用相对路径从 scss 文件指向图像资产时遇到问题。通常，相对路径在本地有效，但在部署到 github 页面后，图像资产的路由缺少 github repo name 部分。不知道是webpack配置问题还是我写错了相对路径

这是我的文件夹结构

├───config
│   └───jest
├───public
│   └───assets
│       ├───css
│       ├───fonts
│       ├───images
│       │   ├───background
│       │   ├───icons
│       │   ├───illustration
│       │   ├───logo
│       │   └───projects
│       │       ├───one
│       │       └───two
│       ├───js
│       └───scss
│           ├───blog
│           ├───common
│           ├───default
│           ├───elements
│           ├───header
│           └───template
├───scripts
└───src
    ├───component
    │   ├───common
    │   ├───footer
    │   ├───header
    │   └───slider
    ├───elements
    │   ├───blog
    │   ├───common
    │   ├───portfolio
    │   ├───projects
    │   └───tab
    └───home

示例 url scss 文件中定义的路径：

.big-center-circle {
    background: url("/assets/images/background/circle-1.svg") no-repeat center top,
}

部署中的结果路由

https://username.github.io/assets/images/background/circle-1.svg

部署中的所需路由

https://username.github.io/repository-name/assets/images/background/circle-1.svg

我使用 react-router-dom 进行路由，相对路径在 jsx 文件中工作正常。我只有 SCSS 样式表中的 urls 有问题。

Answer 1

已解决。我发现资产的 url 应该定义放置在 src 文件夹中的主 scss 文件的相对路径。

SASS 相对 url 配置错误

SASS relative url wrongly configured

routing

sass

reactjs