postcss-scss 解析器必须显式配置，postcss 默认不识别 scss 语法，需在 postcss.config.js 中设置 parser: 'postcss-scss'，否则报「unknown word」等错误；它不是插件，不能写入 plugins 对象。
postcss-scss 解析器必须显式配置
PostCSS 默认不识别 SCSS 语法，直接把 .scss 文件丢给 postcss 会报错：「Unknown word」或「Unexpected character」。这不是插件没装对，而是 PostCSS 根本没启用 SCSS 解析器。
必须在 postcss.config.js 中明确指定 parser: 'postcss-scss'，否则后续所有插件（比如 autoprefixer、cssnano）都收不到合法的 AST，等于白配。
- 安装命令是
npm install postcss-scss --save-dev，不是postcss-sass或其他变体 -
parser是顶层配置项，不能放在plugins数组里 - 如果同时处理
.css和.scss，需用构建工具（如 Webpack）按扩展名分别指定 parser，PostCSS 本身不支持多 parser 混用
autoprefixer 必须在 cssnano 之前执行
插件顺序错了会导致前缀被压缩掉，或者压缩后前缀失效。典型表现是：开发环境样式正常，生产构建后 Flex/Grid 布局在旧浏览器崩溃。
cssnano 会合并规则、移除重复声明、简化值（比如把 #ff0000 转成 red），如果它先跑，autoprefixer 就没机会给 display: flex 补 -webkit-box 了。
- 正确顺序：
autoprefixer→ 其他转换类插件（如postcss-preset-env） →cssnano -
cssnano的preset: 'default'已禁用高风险压缩（如合并不同选择器的相同声明），但依然不能颠倒顺序 - 若用
postcss-cli手动运行，命令行参数顺序也得匹配配置顺序
SCSS 变量无法被 cssnano 优化
cssnano 作用于最终生成的 CSS 字符串，对 SCSS 层的 $color-primary 或 @mixin 完全无感。它看到的只是展开后的 CSS，比如 color: #3498db。
这意味着：SCSS 层的冗余变量、未使用的 @mixin、重复的 @import，cssnano 一概不管——它只管“结果”，不管“源头”。
- 想删未使用样式，得靠
PurgeCSS或unocss这类基于 HTML/JS 引用分析的工具 - 想检查 SCSS 变量是否定义但未用，需要
stylelint-scss插件，不是cssnano的职责 - SCSS 编译阶段（即 parser 阶段）和 PostCSS 处理阶段是分离的；前者输出纯 CSS，后者才开始优化
scoped 样式与 postcss-scss 的兼容性陷阱
Vue 的 <style scoped></style> 或 Svelte 的 <style></style> 默认用 vue-style-loader / svelte-preprocess 处理，它们内部已集成 SCSS 解析，**不会走你的 postcss.config.js**。
如果你在 <style lang="scss" scoped></style> 里写了 SCSS，又指望 autoprefixer 生效，大概率失败——因为 scoped 样式通常绕过全局 PostCSS 配置链。
- Vue CLI 项目中，需在
vue.config.js的css.loaderOptions.postcss下透传配置 - Vite 项目中，
postcss.config.js对<style lang="scss"></style>有效，但对scoped仍受限于其内部插件顺序 - 最稳的方式：把需要 PostCSS 处理的逻辑（如媒体查询、自定义属性）写在非 scoped 的全局样式中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
