CSS乱码根源在于HTML声明、CSS文件编码、HTTP响应头、构建链路四者不一致；须统一为UTF-8且避免BOM，禁用冗余@charset，配置服务器与构建工具编码参数。
HTML 文件声明的 charset 与 CSS 文件实际编码不匹配
浏览器解析 CSS 时，若 HTML 的 声明了 UTF-8，但外部 CSS 文件实际保存为 GBK（或 ANSI），就会出现中文注释、选择器名、content 值等显示为乱码。这不是引入方式（@import 或 ）的问题，而是编码源头不一致。
实操建议：
- 用编辑器（如 VS Code、Sublime Text）打开 CSS 文件，右下角查看当前编码，点击切换并「另存为 UTF-8」（**不要选 UTF-8 with BOM**）
- 确认 HTML 中
位于最前面，且没有其他 meta 冲突 - 如果使用构建工具（Webpack/Vite），检查
css-loader或rollup-plugin-css-only是否默认按 UTF-8 读取——通常无需配置，但自定义 loader 时可能需显式指定encoding: 'utf8'
CSS 文件内含 @charset 声明时的优先级冲突
@charset 是 CSS 规范中用于声明文件编码的规则，但它**必须是 CSS 文件的第一条语句**（前面不能有空行、BOM、注释），且一旦存在，就覆盖 HTML 的 meta 声明和 HTTP Content-Type 头中的字符集。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 明明 HTML 声明了 UTF-8，CSS 里写
div::before { content: "你好"; }却显示方块或问号 - 在 Chrome 开发者工具「Styles」面板看到 CSS 文本已乱码，说明解析阶段就失败了
实操建议：
- 除非明确需要兼容极老环境（IE8 及以下），否则**不要手动加
@charset "UTF-8";** ——现代浏览器默认按 HTML 的 charset 解析外部 CSS - 如果必须用
@charset（例如项目强制要求），确保它严格位于第一行、无空格、无 BOM：@charset "UTF-8";
后面紧跟换行，不能有/* 注释 */或空行 - VS Code 中可通过「Save with Encoding」菜单强制清除 BOM，避免隐式干扰
HTTP 响应头 Content-Type 覆盖 HTML 的 meta 声明
当 CSS 通过 引入时，浏览器会发起独立 HTTP 请求获取该文件。如果服务器返回的响应头包含 Content-Type: text/css; charset=gbk，那么即使 HTML 和 CSS 文件本身都是 UTF-8，浏览器也会按 GBK 解析 CSS，导致乱码。
验证方法：
- 打开 Chrome DevTools → Network → 找到 CSS 请求 → 查看 Response Headers 中的
Content-Type - 本地开发常用 live-server、Vite 等工具，它们默认设为 UTF-8；但 Nginx/Apache 若未配置，可能返回默认 charset（如 ISO-8859-1）
实操建议：
- Nginx 配置中添加：
charset utf-8;
（放在 http/server/location 块中） - Apache 添加：
AddCharset UTF-8 .css
到.htaccess或虚拟主机配置 - Node.js 服务（如 Express）发送 CSS 时显式设置：
res.set('Content-Type', 'text/css; charset=utf-8');
构建产物中 CSS 被压缩/合并后编码丢失
使用 PostCSS、cssnano 或 Webpack 的 mini-css-extract-plugin 时，若输入 CSS 是 UTF-8，但插件内部读取/写入未指定编码，可能在生成 dist 文件时退化为系统默认编码（Windows 下常为 GBK）。
最容易被忽略的点：
- PostCSS 默认按 UTF-8 读取，但某些自定义 parser 或 writer 插件（如旧版
postcss-scss）可能忽略编码参数 - Webpack 5+ 的
css-loader默认encoding: 'utf8'，但若配置了url: false或esModule: false等边界选项，个别版本存在编码继承异常 - 直接用
fs.writeFileSync(cssPath, cssContent)写入时，未传encoding: 'utf8'参数
实操建议：
- 在 Webpack 配置中显式为
css-loader设置：{ loader: 'css-loader', options: { encoding: 'utf8' } } - PostCSS 调用时传
from和to路径，并确保result.css输出前调用result.content.toString()（它会保留原始编码） - 所有 Node.js 文件操作，只要涉及字符串写入，必须带
encoding: 'utf8'参数
统一编码这事，表面看只是改个保存格式，实际要同时卡住 HTML 声明、CSS 文件存储、HTTP 响应头、构建链路四个环节——漏掉任意一个，乱码就可能冒出来。
