Jekyll能加载main.css却无法加载其他CSS文件的问题排查

问题根源 #

你把mystyles.css直接放到了_site/assets目录，但_site是Jekyll的自动生成目录，每次执行jekyll build或jekyll serve时，这个目录会被完全重建，里面的自定义文件会被清空。而且Jekyll只会处理项目根目录下的源文件，不会读取_site里的自定义资源。

解决步骤 #

• 把_site/assets/mystyles.css移动到项目根目录的assets文件夹中（如果根目录没有assets，直接新建一个）。
• 确认_config.yml没有禁用assets文件夹的处理（默认配置下Jekyll会自动复制assets内的文件到_site/assets）。
• 重启本地服务（如果用jekyll serve运行），或者重新执行jekyll build生成静态文件。
• 验证加载情况：
  • 打开浏览器开发者工具的Network面板，查看mystyles.css是否成功加载。如果返回404，检查_config.yml里的baseurl配置是否正确，relative_url过滤器会基于这个值生成路径。
  • 如果文件加载成功但样式不生效，检查选择器权重是否低于main.css里的对应规则，或者CSS代码是否有语法错误。

注意：永远不要手动修改_site目录下的内容，所有自定义文件都要放在项目根目录的源文件夹中，Jekyll会自动处理并同步到生成目录。

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