sass必须先于postcss执行，因为postcss插件仅处理标准css ast，无法识别sass语法（如$变量、@mixin、&__item）；若顺序颠倒，postcss-loader将直接收到sass源码而报错或跳过，导致autoprefixer不加前缀、postcss-nesting静默失效。
PostCSS 必须在 Sass 编译完成之后运行，否则它根本收不到有效的 CSS —— 这不是配置微调问题，而是执行链断裂。
为什么 Sass 和 PostCSS 的顺序不能颠倒
PostCSS 插件（如 autoprefixer、postcss-nesting）只处理标准 CSS AST，不认 @mixin、$color、&__item 这类 Sass 语法。如果 postcss-loader 在 sass-loader 前执行，它拿到的是原始 Sass 源码，直接跳过或报 Unknown word。
- Webpack 的
use数组从右往左执行，正确顺序必须是：'style-loader'→'css-loader'→'postcss-loader'→'sass-loader' - Vite 中，
css.preprocessorOptions.scss.additionalData注入的代码若含@import，会触发 Dart Sass legacy 模式，让所有@use失效，间接破坏 PostCSS 输入结构 - 检查输出：在
.scss文件里写display: flex;，编译后搜索是否生成-webkit-box—— 没有就说明 PostCSS 根本没跑起来
postcss-nesting 和 @nest 为什么静默失效
postcss-nesting v10+ 才真正支持原生 @nest 语法，且要求 & 必须紧贴 @nest 后，中间不能有空格。v9 或更早版本、以及名字相似的 postcss-nested 会把嵌套当 Sass 处理，产出错误选择器（比如 .card &__title 被转成 .card .card__title 重复拼接）。
- 确保
postcss-nesting版本 ≥ 10.0.0：npm list postcss-nesting - 写法必须是：
@nest &__title { color: red; }，不能是：@nest &__title或@nest .card__title - Vite 用户注意：
css.postcss.plugins数组中，postcss-nesting必须排在tailwindcss之前，否则 Tailwind 提前重写选择器，@nest规则被吃掉
如何避免 @import 毁掉整个顺序链
只要任意一个 .scss 文件里存在 @import（哪怕只有一行），Dart Sass 就强制退化为 legacy 模式：@use 被忽略、命名空间消失、样式 inline 到文件末尾 —— PostCSS 收到的是一团乱序拼接的 CSS，变量和嵌套结构全不可控。
- 全局搜索项目中所有
@import，包括node_modules里的第三方库（如旧版 Bootstrap） - 检查
vite.config.ts或vue.config.js中sassOptions.additionalData是否偷偷注入了@import - 升级 Sass：确认
npx sass --version≥ 1.23.0；node-sass已废弃，不支持@use - 替代方案：用
@use替代@import，并在单一入口文件（如index.scss）中手动控制@include顺序
纯 CSS 文件混入 Sass 链路时的陷阱
像 reset.css 或 base.css 这类纯 CSS 文件，如果被 @import 进 Sass，Dart Sass 会尝试 inline，但 Webpack 的 style-loader 可能把它当作独立模块异步注入，导致最终 DOM 中的 <style></style> 标签顺序与你写的顺序完全不一致。
- 不要
@import "reset.css"，改用 JS 显式导入：import './reset.css';，由打包器统一管理注入时机 - 确保 Webpack
entry配置中只有一个样式入口，例如：entry: { app: ['./src/index.js', './src/styles/index.scss'] } - 禁用
mini-css-extract-plugin的hmr选项（设为false），热更新时动态追加<style></style>容易错位
最常被忽略的一点：PostCSS 插件之间的顺序比 Sass 和 PostCSS 之间的顺序更隐蔽也更致命——postcss-import 不在第一位，@import 内容就永远进不了后续插件；postcss-preset-env 不在 autoprefixer 前，新语法降级就漏掉；这些细节一旦错位，连报错都可能静默发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
