怎么在Vite中配置PostCSS自动处理SCSS编译出的CSS？-css教程-PHP中文网

postcss-scss 是解析器而非插件，必须在 vite 或 postcss 配置中显式声明 parser: 'postcss-scss'，否则 scss 语法（如 @use、嵌套）会在解析阶段报错；vite ≥4.5 + postcss ≥8.4 才支持该字段，且推荐在 vite.config.ts 的 css.postcss 中配置。

怎么在vite中配置postcss自动处理scss编译出的css？

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）。

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

安装依赖：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，导致局部编译失败。