如何在Jekyll Gem主题中仅覆盖指定CSS设置？

你之前的问题出在：直接创建同名的_sass/no-style-please.css会完全覆盖主题自带的原文件，只写片段的话，页面就只会加载你写的那几行样式，自然丢失了其他主题样式。

不需要复制整个主题SCSS文件，有两种更稳妥的方式实现局部覆盖：

方法1：通过自定义SCSS文件导入原主题样式并覆盖（推荐） #

这种方式能在保留主题所有原始样式的基础上，精准覆盖指定属性：

1. 在站点根目录下创建_sass文件夹（如果没有），新建custom-styles.scss文件，内容如下：

// 先导入主题的原始样式文件
@import "no-style-please";

// 覆盖.w类的max-width属性，改成你想要的数值
.w {
  max-width: 800px; // 示例值，可根据需求调整
}

2. 在站点根目录创建assets/css文件夹（如果没有），新建main.scss文件，内容为：

---
---
// 导入刚才的自定义样式文件
@import "../_sass/custom-styles";

3. 打开站点的_config.yml文件，找到stylesheet配置项，修改为指向这个新的CSS文件：

stylesheet: /assets/css/main.css

重新运行Jekyll，就能看到页面保留原主题样式，同时.w的宽度已经被修改。

方法2：添加独立的自定义CSS文件 #

如果不想修改SCSS结构，也可以直接添加一个独立的CSS文件来覆盖样式：

1. 在assets/css文件夹下创建custom.css，内容为：

.w {
  max-width: 800px;
  // 保留原主题的margin和padding，仅修改max-width
  margin: 0 auto;
  padding: 4rem 2rem;
}

2. 找到主题的布局文件（若不想修改主题文件，可在本地创建同名布局文件继承原主题布局），在<head>标签里添加对这个CSS文件的引用：

<link rel="stylesheet" href="/assets/css/custom.css">

若原主题样式优先级更高，可在属性后加!important应急（不推荐频繁使用）。

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