postcss-scss 是解析器而非插件，必须在 Vite 或 PostCSS 配置中显式声明 parser: 'postcss-scss'，否则 SCSS 语法（如 @use、嵌套）会在解析阶段报错；Vite ≥4.5 + PostCSS ≥8.4 才支持该字段，且推荐在 vite.config.ts 的 css.postcss 中配置。
postcss-scss 不是插件，是解析器；Vite 默认不识别 SCSS 语法，直接让 PostCSS 处理 .scss 文件会报 Unknown word 或 Unexpected character —— 这不是插件没装对，而是解析器根本没切换。
为什么 postcss.config.js 配了插件还是报错？
因为 PostCSS 默认只认标准 CSS 语法，@use、@forward、嵌套、变量等 SCSS 特性在解析阶段就被拦下了。即使你装了 postcss-scss 并列在 plugins 里，它也不会生效——postcss-scss 必须作为 parser 显式声明，而不是插件。
-
parser: 'postcss-scss'这一行必须出现在postcss.config.js的顶层配置中 - 不能写成
plugins: { 'postcss-scss': {} }，这是常见误配 - Vite 项目中若已用
css.postcss在vite.config.ts里声明配置，则postcss.config.js会被忽略，优先级更低
在 vite.config.ts 中直接配 PostCSS（推荐）
Vite 官方推荐将 PostCSS 配置收口到 vite.config.ts，避免多处配置冲突，也方便动态控制。SCSS 解析器必须在这里显式指定，且要确保 parser 字段可用（Vite ≥ 4.5 + PostCSS ≥ 8.4）。
- 安装依赖：
pnpm add -D postcss-scss -
postcss-scss@4.0.9对应postcss@8.4.38，别升到 PostCSS 9+ - 在
vite.config.ts的css.postcss下写：css: { postcss: { parser: 'postcss-scss', plugins: [ require('tailwindcss'), require('autoprefixer'), require('cssnano')({ preset: 'default' }) ] } }
.scss 文件里用了 @use，但 Tailwind 的 @layer 没生效？
SCSS 的 @use 和 Tailwind 的 @layer 不冲突，但执行阶段不同：@use 是 SCSS 编译期完成导入，生成纯 CSS 后才进 PostCSS 流水线；@layer 是 Tailwind 插件在 PostCSS AST 上操作。所以：
立即学习“前端免费学习笔记（深入）”；
- 确保
tailwindcss插件在postcss.plugins数组里靠前（通常第一） -
@use导入的变量/混入无法被@layer直接引用——它们不在同一作用域 - 如果
@layer规则没出现在最终 CSS 中，先检查tailwind.config.js是否启用了content扫描，而非解析器问题
最常被跳过的点：以为装了 postcss-scss 就万事大吉，结果忘了在 Vite 或 PostCSS 配置里显式挂载 parser 字段；还有人把 .css 和 .scss 混着 import，却没意识到前者走默认解析器、后者才走 postcss-scss，导致局部编译失败。
