laravel mix 中 cssnano 压缩失败、var() 被删、图标消失或热更新卡死，是因 preset 过于激进且未按环境分流；应将 cssnano 作为 mix.postcss() 插件动态注入，并禁用 discardempty、reducetransforms 和 normalizewhitespace。
你在 Laravel Mix 中启用 cssnano 后发现 CSS 压缩失败、var() 变量被删、字体图标消失，或热更新卡死——这不是配置漏了，而是 preset 激进程度和环境判断逻辑没对齐。
确认是否真在用 cssnano
打开 webpack.mix.js，检查是否显式引入了 cssnano：【不要在 postcss.config.js 顶层直接 require('cssnano')】。Laravel Mix 的 PostCSS 链由 mix.postCss() 控制，若你只在 postcss.config.js 里写了 require('cssnano')，它会在 dev 和 prod 环境都生效，导致 HMR 极慢甚至中断。
正确做法是：把 cssnano 放进 mix.postCss() 的插件数组里，并用环境变量包裹。
修复 var() 被删问题
这是 cssnano v6 默认 preset 过于激进导致的。它默认启用 discardEmpty 和 reduceTransforms，而 var(--color) 在某些解析阶段会被误判为空值或冗余规则。
在 webpack.mix.js 中，将 cssnano 配置为函数式调用，显式关闭危险项：
第一步：确保已安装 cssnano v6+：npm install cssnano@latest --save-dev
第二步：修改 mix.postCss() 调用，传入带选项的 cssnano 实例：
mix.postCss('resources/css/app.css', 'public/css', [ require('autoprefixer'), require('cssnano')({ preset: ['default', { discardComments: { removeAll: true }, discardEmpty: false, reduceTransforms: false, normalizeWhitespace: false }] }) ])
注意：normalizeWhitespace: false 必须加上——否则 content: " " 类字体图标伪元素内容会被清空，图标直接不显示。
开发 vs 生产环境分流压缩
方法一：用 process.env.NODE_ENV 动态加载
在 postCss 插件数组中，只在生产环境推入 cssnano：
const plugins = [require('autoprefixer')]; if (process.env.NODE_ENV === 'production') { plugins.push(require('cssnano')({ preset: ['default', { discardEmpty: false, reduceTransforms: false }] })); }
mix.postCss('resources/css/app.css', 'public/css', plugins);
方法二：改用 Laravel Mix 内置的 .minify()（仅限单文件）
如果你只压缩一个输出 CSS 文件（如 public/css/app.css），可跳过 PostCSS 链，直接用：
mix.postCss('resources/css/app.css', 'public/css').minify('public/css/app.css');
该方法底层使用轻量压缩器，不触发 cssnano 全量分析，【不会删 var()，也不影响 HMR】，适合快速验证。
验证压缩结果是否生效
运行 npm run production 后，打开 public/css/app.css，搜索 var( —— 如果仍存在且未被替换为具体值，说明 cssnano 已正确绕过变量替换逻辑。
再搜索 content:，确认类似 content: "\f007"; 或 content: " "; 的声明未被删减。
最后检查 public/mix-manifest.json 是否生成且键名路径正确（如 "/css/app.css": "/css/app.css?id=abc123"），否则 Blade 中 {{ mix('css/app.css') }} 会 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
