怎样解决Sass在Windows环境下编译CSS编码异常？

作者：袖梨 2026-07-13

必须修改 engine.rb 中 Encoding.default_external = Encoding.find('utf-8')，否则 @charset "UTF-8" 无效；因 Ruby 默认用 GBK 解码 SCSS 文件，读取阶段即报错，根本未执行 Sass 解析。

直接改 engine.rb，否则加 @charset "UTF-8" 永远没用——Ruby 读文件时就崩了，根本到不了 Sass 解析阶段。

为什么 `@charset "UTF-8"` 加了也没效

这行只对最终输出的 .css 文件生效，告诉浏览器“这个 CSS 是 UTF-8”，但它不干预 Ruby 读取源 .scss 文件的过程。错误里出现的 Invalid GBK character "xE5"，说明 Ruby 正在用 GBK 解码 UTF-8 字节流，直接报错退出。此时 @charset 还躺在文件开头，压根没被读到。

@charset "UTF-8"; 前有空格、空行或 BOM（尤其记事本默认带 BOM）→ 失效
写成小写 utf-8 → 旧版 Sass 忽略
加在 .scss 里却指望它修复 Ruby 层读取行为 → 逻辑错位

必须修改 `engine.rb` 设置 Ruby 默认编码

Windows 下 Ruby 默认 Encoding.default_external 是 GBK，不是 UTF-8。要让它用 UTF-8 打开文件，得手动改 Sass gem 的 engine.rb。

先运行 sass -v 确认实际版本，再用 gem which sass 或 bundle show sass 找真实路径，别只看系统 Ruby 安装目录
典型路径：C:Ruby25-x64librubygems2.5.0gemssass-3.7.3libsassengine.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:Koalarubygemsgemssass-3.4.9libsassengine.rb
在所有 require 语句之后、module Sass 或 class Sass::Engine 定义之前插入一行：Encoding.default_external = Encoding.find('utf-8')

`.scss` 文件本身必须满足三个硬条件

漏掉任意一条，整个修复链就断了。

立即学习“前端免费学习笔记（深入）”；

用 VS Code、Sublime 或 WebStorm 保存为 UTF-8 without BOM（别选 “UTF-8 with BOM”）
@charset "UTF-8"; 必须是文件第一行、第一个字符，前面不能有任何东西（包括空格、注释、BOM）
项目路径不能含中文，比如 D:我的项目srcstyle.scss 会触发 Ruby 编码异常；临时改成 D:my-projectsrcstyle.scss 验证是否是这个原因

编译后 `.css` 仍乱码？检查三处 UTF-8 是否统一

即使 SCSS 成功编译，浏览器加载时还可能二次乱码。

HTML 中有 <meta charset="UTF-8">，且放在 <head> 靠前位置
编译输出的 .css 文件头部有 @charset "UTF-8";（注意：这是输出文件，不是源 SCSS）
确保 Web 服务器返回的 HTTP Content-Type header 包含 charset=utf-8，比如 text/css; charset=utf-8

最常被忽略的是项目路径含中文和 engine.rb 插入位置不对——前者导致 sass --watch 直接崩溃，后者让整段设置完全不生效。