postcss 默认不支持 scss 语法，必须在 postcss.config.js 中显式配置 parser: 'postcss-scss'，而非将其作为插件添加；需注意版本兼容性（postcss 8.x 对应 postcss-scss@4.x），且 scss 语法仅对 .scss 文件生效。
PostCSS 默认不支持 SCSS 语法，必须显式替换解析器
PostCSS 本身只处理标准 CSS，postcss-scss 是一个独立的解析器插件，不是 PostCSS 的内置能力。Tailwind 的 tailwind.config.js 或构建脚本（如 Vite、Webpack）若未主动指定解析器，即使安装了 postcss-scss，也会继续用默认的 postcss 解析器报错——典型现象是 @use、@forward、嵌套写法或变量声明直接被忽略或抛出 Unknown word 错误。
实操要点：
- 必须在
postcss.config.js中显式配置parser: 'postcss-scss'，不能只靠安装依赖 -
postcss-scss版本需与 PostCSS 兼容：PostCSS 8.x 对应postcss-scss@4.x；PostCSS 9+ 尚未有稳定适配版本，目前仍建议锁在postcss@8.4.38+postcss-scss@4.0.9 - SCSS 语法仅在
.scss文件中生效；.css文件仍走默认解析器，混用时注意后缀一致性
如何在 postcss.config.js 中正确启用 postcss-scss
关键不是加插件，而是换解析器。Tailwind 的 tailwindcss 插件本身不关心语法，它只处理已解析的 AST，所以解析阶段必须前置完成。
正确配置示例（postcss.config.js）：
module.exports = {
parser: 'postcss-scss', // ← 必须这一行
plugins: {
'tailwindcss': {},
'autoprefixer': {},
},
}
常见错误：
- 把
postcss-scss当作插件写进plugins对象里（它不是插件，是解析器） - 在 Vite 项目中只改了
postcss.config.js，却没确认 Vite 是否读取它（Vite 默认读取，但若用了vite.config.ts中的css.postcss配置，则以该处为准） - 使用 pnpm/yarn/npm 安装时未加
--save-dev，导致构建时找不到模块
Tailwind 的 @layer 和 SCSS @use 能否共存
可以共存，但作用域和执行顺序有隐含约束：SCSS 的 @use 在解析阶段完成变量/混合宏导入，而 Tailwind 的 @layer 是在 PostCSS 处理阶段注入规则。二者不冲突，但要注意变量不可跨语法传递。
例如：
// styles.scss
@use 'sass:math';
@use './tokens' as t;
@layer base {
:root {
--spacing-xs: #{t.$spacing-2}; // ✅ 可行：SCSS 表达式提前计算
}
}
@layer components {
.btn {
padding: t.$spacing-4; // ✅ 可行：SCSS 变量直接展开
}
}
注意点：
- Tailwind 的
theme()函数无法读取 SCSS 变量（如theme('spacing.4')仍只认tailwind.config.js里的值） - 不要在
@layer外部用@apply引用 SCSS 混合宏（@apply不支持 SCSS 逻辑） - 如果需要动态生成工具类，优先用 Tailwind 的
addUtilities+ JS 对象，而非 SCSS 循环
为什么 vite-plugin-tailwind-purgecss 或 @nuxtjs/tailwindcss 会破坏 SCSS 支持
这类封装插件常默认覆盖 postcss.config.js 或硬编码解析器，绕过用户配置。典型表现是：单独跑 postcss input.scss -o output.css 正常，但在 Vite/Nuxt 启动时解析失败。
排查路径：
- 检查插件文档是否声明“自动配置 PostCSS”，如有，确认它是否允许传入
parser选项 - 在 Vite 中，优先使用原生
css.postcss.options.parser配置，而非依赖插件自动集成 - Nuxt 3 用户应避免使用
@nuxtjs/tailwindcss（已废弃），改用官方@nuxthq/ui或手动配置build.postcss - 运行
npx tailwindcss --verbose查看实际加载的 PostCSS 配置路径和解析器名，验证是否被覆盖
最稳妥的做法，是弃用所有“一键集成”插件，手动在 postcss.config.js 和构建工具配置中对齐解析器，尤其当项目里同时存在 .css 和 .scss 文件时，这种显式控制反而更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
