CSS 文件无法在 github 页面上正确加载答案

【问题标题】：CSS files not loading correctly on github pagesCSS 文件无法在 github 页面上正确加载
【发布时间】：2023-01-27 00:53:53
【问题描述】：

我正在制作一个具有多个主题的计算器应用程序，一切都在本地工作，但问题出现在 github 页面上。计算器的每个主题都有自己的 css 文件，我使用 javascript 根据所选主题更改链接标签的 href（默认情况下选择 theme-1）：

HTML:

<link rel="stylesheet" id="themeStyleSheet" href="styles/themes/theme-1.css">

Java脚本：

const themeSelector = document.querySelector('#themeSelector');
const themeStyleSheet = document.querySelector('#themeStyleSheet');
let themeValue = 1;

function lastSelectedTheme(){
    themeValue = localStorage.getItem('selectedTheme');
    if(themeValue === '1'){
        themeStyleSheet.href = 'styles/themes/theme-1.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
    else if(themeValue === '2'){
        themeStyleSheet.href = 'styles/themes/theme-2.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
    else if(themeValue === '3'){
        themeStyleSheet.href = 'styles/themes/theme-3.css';
        themeSelector.value = localStorage.getItem('toggleValue');
    }
}

当我使用 github 查看我的页面时，它会自动添加 '/' 在 href 的开头，而没有 '/' 在导致问题的原始 javascript 代码中（如果我从开发人员控制台手动删除 '/' 然后它工作）

我该如何停止/被添加到 href？

Github 回购：https://github.com/FaDiiiLeo/calculator

【问题讨论】：

如果您想要使用多个样式表的替代解决方案，IMO 更好的选择是更改 BODY 上的类，然后在每个样式开头的 CSS 中添加类，如下所示：.Theme1 输入[类型=范围],.Theme2 输入[类型=范围]等等。这将使主题切换也更快一些，因为它只会在一个文件中，该文件已经在页面加载时加载了。
您只需要在 github 页面上创建一个新的部署——您激活的部署正在使用旧的提交，其中斜线仍然存在于源代码中。
但是@imvain2 的建议很好

标签： javascript html css github github-pages

【解决方案1】：

Github 根本不应该更改您的代码。查看您的回购协议，我假设您正在为该页面使用 main 分支？

我想可能发生了什么事情阻止了你的提交部署。由于您的提交正是此处的更改： https://github.com/FaDiiiLeo/calculator/commit/00e6c0120da611f340657b357605e387b6453a90

我会推送另一个提交并检查它是否已修复。

【讨论】：

谢谢，推动另一个提交工作

【解决方案2】：

对于需要帮助解决此问题的任何人：

我通过添加“.”将我的 css 文件链接到我的 html 文件。（句号）在链接 href 中的正斜杠之前
请看下面的例子：

图片来源：一位研究伙伴向我展示了这一点。 https://github.com/ramitaarora/final-project-portfolio/blob/main/index.html

希望能帮助到你！

【讨论】：