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> 或 Svelte 的 <style> 默认用 vue-style-loader / svelte-preprocess 处理,它们内部已集成 SCSS 解析,**不会走你的 postcss.config.js**。
如果你在 <style lang="scss" scoped> 里写了 SCSS,又指望 autoprefixer 生效,大概率失败——因为 scoped 样式通常绕过全局 PostCSS 配置链。
- Vue CLI 项目中,需在
vue.config.js的css.loaderOptions.postcss下透传配置 - Vite 项目中,
postcss.config.js对<style lang="scss">有效,但对scoped仍受限于其内部插件顺序 - 最稳的方式:把需要 PostCSS 处理的逻辑(如媒体查询、自定义属性)写在非 scoped 的全局样式中


















