核心原因是ruby版sass在windows下默认用gbk读取scss文件，而非utf-8；需修改engine.rb添加encoding.default_external = encoding.find('utf-8')，置于所有require之后、module sass之前，并确保项目路径为纯英文。
SCSS编译后CSS出现中文乱码，核心原因不是文件本身没存成UTF-8，而是Ruby版Sass在Windows下默认用GBK读取文件——哪怕你用VS Code把.scss保存为UTF-8，它照样按GBK解析，直接报Syntax error: Invalid GBK character ""。
为什么加@charset "utf-8"经常没用
这行声明只在编译输出的CSS头部生效，告诉浏览器“这个CSS是UTF-8”，但它不控制Sass读取源文件时的编码。Ruby Sass在读取.scss文件前就已经用错误编码解码失败了，根本到不了解析@charset那步。
- 加在文件开头仅对最终CSS的
Content-Type声明有效 - 无法修复源文件读取阶段的字符解码错误
- 部分编辑器（如旧版Sublime）甚至会因BOM导致
@charset位置偏移而失效
必须修改engine.rb设置Ruby默认外部编码
所有基于Ruby Sass（包括Koala、命令行sass、Jekyll等）的Windows用户，都要改这个文件。路径取决于你的Ruby和Sass版本，常见位置有：
D:Koala ubygemsgemssass-3.4.9libsassengine.rbC:Ruby23-x64lib ubygems.3.0gemssass-3.4.22libsassengine.rbC:Ruby21lib ubygems.1.0gemssass-3.4.15libsassengine.rb
打开后，在所有require语句之后、module Sass定义之前，插入这一行：
Encoding.default_external = Encoding.find('utf-8')
注意：不能放在require中间，也不能放在module内部，否则不生效。
sass --watch报错但手动编译正常？检查路径是否含中文
这是个经典陷阱：sass --watch会调用额外的监听模块（如rb-inotify或listen），这些模块在Windows下对中文路径支持极差，即使engine.rb已修复，watch仍可能抛出CompatibilityError: incompatible character encodings: GBK and UTF-8。
- 临时解决：把项目移到纯英文路径，例如
C:projectsmy-app - 不要用
D:我的项目或C:Users张三... - Koala用户需确认“项目路径”和“输出路径”都为英文
Vue/Element-UI项目里图标变方块？别碰e6df转义序列
这不是乱码，是Dart-Sass（现代主流）把Unicode转义自动展开成真实字符（比如e6df → ），而某些CDN或压缩工具无法正确处理双字节图标字符。Node-sass则保留转义，更稳定。
- 若用
dart-sass，确保content值始终写成"\e6df"（双反斜杠） - Element-UI自定义主题时，避免直接
@import "~element-ui/packages/theme-chalk/src/index"，改用预编译好的element-ui/lib/theme-chalk/icon.css - Webpack中可加
css-loader配置{ esModule: false }防转义破坏
真正容易被忽略的是：同一个SCSS文件，在不同机器上编译结果可能不同——因为Ruby版本、Sass版本、系统区域设置（Control Panel → Region → Administrative → Change system locale）三者共同影响编码行为。修完engine.rb后，记得重启终端或Koala，否则缓存会掩盖改动效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
