@charset "utf-8" 单独添加无效，因 ruby 默认用 gbk 解码文件导致读取阶段即报错；必须同步修改 engine.rb 中 encoding.default_external = encoding.find('utf-8')，并确保 scss 文件为 utf-8 无 bom 编码。
@charset "UTF-8" 单独加在 SCSS 文件开头，大概率解决不了乱码问题——它根本没机会起作用。 Ruby Sass 在读取文件时就已经用系统默认编码（比如 Windows 上的 GBK）解码失败了，报错如 Error: Invalid GBK character "\xE5"，此时 Sass 解析器甚至还没开始处理 @charset 声明。
为什么 @charset "UTF-8" 经常无效
这行声明只对 Sass 解析器“解释后续内容用什么编码”起作用，但前提是 Ruby 已经成功把文件内容以某种编码读进内存。而 Ruby 默认的 Encoding.default_external 在 Windows 下通常是 GBK，不是 UTF-8。
-
@charset必须是文件第一行、第一个字符（不能有 BOM、空格、注释） - 大小写敏感：必须写成
UTF-8，不是utf-8（旧版 Sass 会忽略后者） - 它不控制 Ruby 打开文件时的解码行为，只影响 Sass 内部对已读入字符串的解释
- 如果你用的是 Koala、CodeKit 等 GUI 工具，它们自带 Ruby 环境，
@charset对它们完全无效
真正要改的是 Ruby 的 Encoding.default_external
必须定位到当前项目实际使用的 Sass gem 中的 engine.rb 文件，在所有 require 语句之后、类定义之前插入：
Encoding.default_external = Encoding.find('utf-8')
典型路径示例：
- Windows：
C:\Ruby25-x64\lib\ruby\gems\2.5.0\gems\sass-3.7.3\lib\sass\engine.rb - macOS：
/usr/local/lib/ruby/gems/3.0.0/gems\sass-3.7.4\lib\sass\engine.rb - Koala：
D:\Koala\rubygems\gems\sass-3.4.9\lib\sass\engine.rb
改完后务必用 sass -v 核对版本，并确认编辑保存时文件本身是 UTF-8 无 BOM —— VS Code 或 Sublime 要手动选 “Save with Encoding → UTF-8”，别选 “UTF-8 with BOM”。
编译后 CSS 中文仍乱码？检查 HTTP 响应头和 HTML meta
即使 SCSS 编译成功，浏览器加载 CSS 时还可能二次乱码。关键看三处是否统一为 UTF-8：
- HTML 中的
<meta charset="UTF-8">必须在内且靠前 - CSS 文件头部的
@charset "UTF-8";（注意：这是编译输出的 CSS，不是源 SCSS） - HTTP 响应头中的
Content-Type: text/css; charset=utf-8（本地文件协议file://下不生效，需走服务器）
如果用 Webpack/Vite，确保 css-loader 或 rollup-plugin-css-only 显式配置 encoding: 'utf8'，否则默认可能按系统编码读取 CSS 文件。
最容易被忽略的一点：你改的 engine.rb 是不是当前命令行运行 sass 时实际加载的那个？不同 Ruby 版本、不同 gemset、GUI 工具内置环境，都可能指向完全不同的文件路径。不验证路径就改，等于白做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
