根本原因是生产环境使用dart-sass将unicode转义序列（如\e6e4）转为实际字符，而字体无对应glyph致图标变方块；开发环境node-sass保留转义，故正常。
生产环境 Sass 构建结果和开发环境不一致，根本原因几乎总是编译器或配置链路在构建阶段发生了隐性切换——不是代码写错了，而是工具链“悄悄变了”。
检查 sass-loader 是否自动降级到 node-sass
Vue CLI 或旧版 Webpack 项目默认会尝试用 node-sass，但它早已被 Dart Sass 取代。一旦 node-sass 被意外安装（或残留），sass-loader 就会优先使用它，而它的 Unicode 处理、@use 行为、SourceMap 输出都和 Dart Sass 不兼容。
- 运行
npm ls node-sass和npm ls sass，确认node-sass未安装、sass（Dart Sass）已安装且为最新稳定版（≥1.77） - 若存在
node-sass，执行npm uninstall node-sass并删掉node_modules+package-lock.json后重装 - 在 Webpack / Vue CLI 配置中显式指定
sass-loader的实现：implementation: require('sass')，避免自动探测
验证 content 字符是否被错误解码（Element UI 图标变方块）
这是最典型的差异表现：开发时图标正常，打包后全成方块。本质是伪元素的 content 值（如 "\e6e4"）在 Dart Sass 默认输出下被转成了实际字符（如 "?"），而字体文件里没有对应 glyph，浏览器就 fallback 成方块。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 在 Chrome 控制台运行：
getComputedStyle(document.querySelector('.el-icon-search'), ':before').content，看返回值是"\e6e4"还是乱码/空格 - 如果是后者，说明 Sass 编译时没启用
--unicode模式（Dart Sass CLI）或没配outputStyle: 'expanded'（JS API） - 在
sass-loader配置中加additionalData或用webpack.DefinePlugin注入全局变量，强制让_icon.scss中的 Unicode 字符保持转义形式
比对 CSS 文件的 SourceMap 和实际内容行号
即使样式看起来一样，如果 SourceMap 错位，说明某层 loader 没透传原始信息——这往往意味着开发时看到的是 SCSS 源码，而生产构建跳过了某些预处理步骤。
- 打开浏览器开发者工具 → Sources → 找到你的
.css文件 → 点开同名.css.map→ 查看sources字段是否列出.scss文件，路径是否为相对路径（如button.scss），而非绝对路径或空数组 - Webpack 中必须同时开启：
sass-loader的sourceMap: true、css-loader的options.sourceMap: true、MiniCssExtractPlugin的publicPath: '' - Vite 用户注意：
css.devSourcemap和sassOptions.sourceMap是两个独立开关，缺一不可
确认环境变量是否真正注入到 Sass 编译上下文
很多人用 process.env.NODE_ENV 控制 JS 层逻辑，却误以为它也能直接进 Sass ——其实 Sass 本身不读环境变量，必须靠构建工具桥接。
- 不要在
.scss文件里写@if $NODE_ENV == 'production'—— Sass 没这个变量 - 正确做法：用 Webpack 的
DefinePlugin注入全局常量，再通过sass-loader的additionalData注入 SCSS 变量，例如：$env: 'development'; - 或者更轻量：在 HTML 中用
<link rel="stylesheet" href="/css/main-<code>process.env.NODE_ENV.
真正容易被忽略的点是：Sass 编译器切换和 Unicode 处理是静默发生的，不会报错，只会让图标、字体、甚至某些计算函数的结果在生产环境“微妙地不对”。排查时别只盯 CSS 内容，要从 npm ls、getComputedStyle、.map 文件三处交叉验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
