必须修改 engine.rb 中的 Encoding.default_external 为 UTF-8,因为 Ruby 读取 SCSS 文件时按默认 GBK 解码导致崩溃,@charset 对源文件读取无效;同时确保文件为 UTF-8 without BOM、无中文路径、@charset 位于首行首字符。

直接改 engine.rb,不改这个文件,加 @charset "UTF-8" 永远没用——Ruby 读文件阶段就崩了,根本到不了 Sass 解析器。
为什么 @charset "UTF-8" 单独加在 SCSS 文件开头完全无效
错误信息里出现的 Invalid GBK character "\xE5" 是 Ruby 报的,不是 Sass。它说明 Ruby 正在用 GBK 编码去解码一个 UTF-8 编码的文件(比如含中文注释或字体名),字节流对不上,直接抛异常退出。此时 @charset 还躺在文件第一行,压根没被读到。
-
@charset只影响 Sass 输出的 CSS 文件头部声明,和源文件读取过程无关 - 编辑器存成 UTF-8 没用——Ruby 不看你怎么存,只按自己默认的
Encoding.default_external去打开文件 - VS Code / Sublime 存成 “UTF-8 with BOM” 会导致
@charset不再是首字符,整行失效 - 小写
utf-8在 Sass 3.7.x 及更早版本中会被忽略,必须写UTF-8
必须修改 engine.rb 中的 Encoding.default_external
这是唯一能绕过 Ruby 默认 GBK 行为的办法。关键不是“要不要改”,而是“改对位置、改对路径、改对版本”。
- 先运行
sass -v确认你实际用的 Sass 版本,再用gem which sass或bundle show sass查真实路径——别只看系统 Ruby 安装目录 - 典型路径:
C:\Ruby25-x64\lib\ruby\gems\2.5.0\gems\sass-3.7.3\lib\sass\engine.rb(Windows)或/usr/local/lib/ruby/gems/3.0.0/gems/sass-3.7.4/lib\sass\engine.rb(macOS) - Koala / CodeKit 用户:它们自带 Ruby,得进安装目录找内嵌 gem,例如
D:\Koala\rubygems\gems\sass-3.4.9\lib\sass\engine.rb - 在所有
require语句之后、module Sass或class Sass::Engine定义之前插入这一行:Encoding.default_external = Encoding.find('utf-8') - 别加括号,别放
require块内部,否则可能被覆盖
SCSS 文件本身必须满足三个硬条件
漏掉任意一条,整个修复链就断了。
立即学习“前端免费学习笔记(深入)”;
- 用 VS Code、Sublime 或 WebStorm 保存为 UTF-8 without BOM;记事本默认带 BOM,要手动选“UTF-8”,不是“ANSI”
-
@charset "UTF-8";必须是文件第一行、第一个字符——前面不能有空格、空行、BOM、注释,也不能有零宽空格(\u200b) - 项目路径不能含中文,例如
D:\我的项目\src\style.scss会触发 Ruby 编码异常;临时改成D:\my-project\src\style.scss验证是否是这个原因
sass --watch 报错但手动编译正常?检查路径和监听模块
这是个高频陷阱:sass --watch 会调用额外的监听模块(如 rb-inotify 或 listen),这些模块在 Windows 下对中文路径支持极差,即使 engine.rb 已修复,仍可能抛出 incompatible character encodings: GBK and UTF-8。
- 把项目移到纯英文路径,例如
C:\projects\my-app,不要用D:\我的项目或C:\Users\张三 - 某些 GUI 工具(如 Koala)的 watch 功能依赖其内嵌 Ruby 环境,改完
engine.rb后需重启工具 - 如果用 Dart Sass(
sass命令来自 npm),则无需改engine.rb,但需确保输入文件为 UTF-8 without BOM,且@charset位置正确
最易被忽略的是:改完 engine.rb 后没确认是否改对了 gem 版本路径,或者编辑器悄悄存成了带 BOM 的 UTF-8 —— 这两种情况都会让整个修复链断裂。


















