Jekyll Scss Converter转换报错，如何正常将SCSS转为CSS？

错误原因分析 #

带YAML front matter（---）时，Jekyll会将assets/css/warriors.scss识别为需要编译的SCSS文件，此时报错expected "{"，说明_sass目录下的charhub.scss或warriors.scss存在语法错误（比如缺少大括号、CSS规则不完整等）。而去掉front matter后，Jekyll未触发该文件的SCSS编译流程，所以没报错但也无法生成目标CSS文件。

具体解决步骤 #

步骤1：修复_sass目录下的SCSS语法 #

检查charhub.scss和warriors.scss的内容，确保每个文件的SCSS语法完整。示例正确写法：

// charhub.scss
body {
  background-color: #f5f5f5;
}

// warriors.scss
.warrior-card {
  padding: 1.5rem;
  border-radius: 8px;
}

避免空文件、缺少大括号或分号等语法问题。

步骤2：保留YAML front matter并配置编译规则 #

在assets/css/warriors.scss中保留front matter（这是Jekyll识别编译目标的关键标志），内容如下：

---
---
@import "charhub", "warriors";

同时检查_config.yml中的Sass配置，确保存在以下设置（无则添加）：

sass:
  sass_dir: _sass
  style: expanded # 可按需改为 compressed、compact 等格式

步骤3：验证编译结果 #

运行Jekyll命令触发编译：

bundle exec jekyll serve
# 或生产环境构建
bundle exec jekyll build

此时Jekyll会正常编译assets/css/warriors.scss，生成对应的assets/css/warriors.css文件。

若希望去掉front matter仍能自动编译，需确认：

• _config.yml未将assets/css/warriors.scss加入exclude列表
• 使用Jekyll 3.0及以上版本（默认支持无front matter的SCSS自动编译）

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