加@charset "utf-8"无效是因为ruby默认用gbk解码utf-8源文件，需修改sass引擎中encoding.default_external为utf-8，并确保scss文件为utf-8无bom、@charset为首行、项目路径无中文。
为什么加 @charset "UTF-8" 没用
这行声明只对最终生成的 .css 文件头部生效，告诉浏览器“这个 CSS 是 UTF-8”，但它完全不干预 Ruby 读取源 .scss 文件的过程。错误信息里出现的 Invalid GBK character "\xE5"，说明 Ruby 在把文件内容传给 Sass 解析器之前，就已经用 GBK 去解码含中文的 UTF-8 字节流，直接崩溃——@charset 还躺在文件里，根本没被读到。
常见误操作包括：
-
@charset "UTF-8";前有空格、空行或 BOM（尤其记事本保存时默认带 BOM） - 写成小写
utf-8，旧版 Sass 会忽略 - 加在 SCSS 文件里，却指望它修复 Ruby 层的读取行为
必须改 engine.rb 中的 Encoding.default_external
Ruby（尤其 Windows 下）默认 Encoding.default_external 是 GBK，不是 UTF-8。要让它用 UTF-8 打开文件，得手动改 Sass gem 自带的 engine.rb。
关键点：
- 先用
sass -v确认你实际用的 Sass 版本，再用bundle show sass或gem which 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')
.scss 文件本身必须满足三个硬条件
漏掉任意一条，整个修复链就断了：
- 用 VS Code、Sublime 或 WebStorm 保存为 UTF-8 without BOM（别选 “UTF-8 with BOM”）
-
@charset "UTF-8";必须是文件第一行、第一个字符，前面不能有任何东西 - 项目路径不能含中文，比如
D:\我的项目\src\style.scss会触发 Ruby 编码异常；临时改成D:\my-project\src\style.scss验证是否是这个原因
编译后 CSS 仍乱码？检查三处 UTF-8 是否统一
SCSS 成功编译 ≠ 浏览器正确显示：
- HTML 中有
<meta charset="UTF-8">，且放在靠前位置 - 编译输出的
.css文件头部有@charset "UTF-8";（注意：这是编译输出的 CSS，不是源 SCSS） - HTTP 响应头中的
Content-Type: text/css; charset=utf-8（本地文件协议file://下不生效，需走服务器）
最易被忽略的是：改完 engine.rb 后没确认是否改对了 gem 版本路径，或者编辑器悄悄存成了带 BOM 的 UTF-8 —— 这两种情况都会让整个修复链断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
