如何在Jekyll Minimal Mistakes主题中覆盖页脚背景色样式？

问题原因 #

你定义的$footer-background-color变量没生效，是因为neon皮肤文件里直接硬编码了页脚背景色值，没有使用这个变量，所以你在main.scss里的变量定义不会被引用到。

解决方案（两种可选） #

方案1：修改本地皮肤文件（推荐，符合主题自定义逻辑） #

1. 找到你复制到本地的_sass/minimal-mistakes/skins/neon.scss文件
2. 搜索.site-footer选择器，找到其中的background-color属性：

   .site-footer {
     background-color: #18020a; // 这行是硬编码的颜色
     // 其他样式...
   }
   

3. 把#18020a改成你想要的#ff0000，或者替换成你定义的变量$footer-background-color（这样后续可以在main.scss里统一修改）：

   // 如果用变量，先确保main.scss里的变量在导入皮肤前定义
   .site-footer {
     background-color: $footer-background-color;
     // 其他样式...
   }
   

4. 重新启动Jekyll服务，刷新页面即可看到效果。

方案2：直接添加自定义CSS覆盖（快速生效） #

如果不想修改皮肤文件，可以在main.scss的最后添加自定义CSS，通过更高优先级的选择器覆盖原有样式：

/* assets/css/main.scss */
$footer-background-color: #ff0000;

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}";
@import "minimal-mistakes";

// 新增以下代码
.site-footer {
  background-color: #ff0000;
}

注：如果还是不生效，可以给样式加!important（不推荐，但应急可用）：background-color: #ff0000 !important;

额外检查点 #

• 确认你的_config.yml里已经设置了minimal_mistakes_skin: neon，确保皮肤正确加载
• 清理Jekyll缓存（删除.jekyll-cache文件夹）后重新启动服务，避免缓存导致样式不更新

内容的提问来源于stack exchange，提问作者M Alexander