部署到 github 页面时 CSS 相对路径损坏，构建过程问题？答案

【问题标题】：CSS relative path broken when deploying to github pages, build process issue?部署到 github 页面时 CSS 相对路径损坏，构建过程问题？
【发布时间】：2020-05-14 00:24:34
【问题描述】：

我构建了一个非常简单的静态页面，部署到 Github Pages。我很快注意到大多数 CSS 背景图像无法加载。经过一番挖掘，我发现罪魁祸首是我的 SCSS/CSS。

在 VSCode 中，我的图像相对路径如下所示：

  @media (min-resolution: 192dpi) and (min-width: 37.5em),
    (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
    (min-width: 125em) {
    background-image: linear-gradient(
        to right bottom,
        rgba($color-primary-light, 0.801),
        rgba($color-primary-dark, 0.801)
      ),
      url(../../img/apple-mountains_1920.jpg);

但是，这会导致 URL 被截断，退出存储库。

应该是什么：

https://name.gethub.io/repositoryname/img/apple-mountains_1920.jpg

我得到了什么：

https://name.gethub.io/img/apple-mountains_1920.jpg

要解决这个问题，我只需要检查并从我的所有背景图像路径中删除一个句点：

url(../../img/apple-mountains_1920.jpg);

变成：

url(./../img/apple-mountains_1920.jpg);

有趣的是，在我机器上的 VSCode 中，如果我不使用格式 (../../img...)，则找不到文件。

我做错了什么？我对部署还很陌生，这会是我使用的任何虚拟主机的问题，还是 Github 页面独有的问题？

更好的是，有没有一种方法可以在我的构建过程中自动修复这个问题？现在我只是通过这个系列运行我的 SCSS：

"compile:sass": "node-sass sass/main.scss css/style.comp.css", "concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css", "prefix:css": "postcss --use autoprefixer -b \"last 5 versions\" css/style.concat.css -o css/style.prefix.css", "compress:css": "node-sass css/style.prefix.css css/main.css --output-style compressed",

编辑：我的文件树结构是：

Project Folder
|- index.html
|- [css folder]
|- [img folder]
|- [js folder]
|- [sass folder]
|  |- main.scss
|  |- [abstracts]
|  |  |-_functions.scss
|  |  |-_mixins.scss
|  |  |-_variables.scss
|  |- [base]
|  |  |-_base.scss
|  |  |-_typography.scss
|  |  |-_utilities.scss
|  |- [components]
|  |  |-_buttons.scss
|  |  |-_form.scss
|  |  |-_cards.scss
|  |- [layout]
|  |  |-_footer.scss
|  |  |-_header.scss
|  |  |-_navigation.scss
|  |- [pages]
|  |  |-_home.scss

我的开发机器是 Windows 10，如果有区别的话。

谢谢！

【问题讨论】：

标签： css github visual-studio-code sass github-pages

【解决方案1】：

试试 '../img/apple-mountains_1920.jpg' 如果你的文件树看起来像

somefolder
    index.html
img
   thisImage

但有什么更好的方法 - 将您的文件树添加到问题中

【讨论】：

谢谢！添加了文件树，因为来自我的 SASS 编译的相对路径似乎是问题的一部分。

【解决方案2】：

经过深入研究，问题似乎是由于我尝试使用 7-1 样式的文件夹结构，其中源 SASS 与 CSS 的结构不同或相似。

似乎我可能需要利用像 resolve-url-loader 这样的包来自动修复相对路径。

【讨论】：