时间戳

首页 > 解决方案 > SASS 相对 url 配置错误

reactjs - SASS 相对 url 配置错误

问题描述

我正在处理 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

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

.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 样式表中的 url 有问题。

标签： reactjssassrouting

解决方案

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

推荐阅读