sass-loader必须在postcss-loader之前执行，否则PostCSS会因解析未编译的SCSS语法（如@mixin、$var）而报错；Webpack中use数组从右到左执行，正确顺序为['style-loader','css-loader','postcss-loader','sass-loader']。
sass-loader 必须在 postcss-loader 之前执行，否则 PostCSS 会收到未编译的 SCSS 语法，直接报错。
webpack 中 loader 执行顺序不能颠倒
Webpack 的 use 数组是**从右往左执行**的，所以配置里 sass-loader 要放在最右边，postcss-loader 紧挨左边：
use: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' // ✅ 正确：最后处理，输出纯 CSS ]
如果写成 ['sass-loader', 'postcss-loader']，PostCSS 会尝试解析 @mixin、$var 这类 Sass 语法，抛出 Unknown word 或 Unexpected token 错误。
- 常见错误现象：
postcss-loader: Unknown word、Expected a pseudo-class or pseudo-element - 本质原因：PostCSS 只处理标准 CSS AST，不理解 Sass 特有语法
- 兼容性影响：Webpack 5+ 和 Vite 4+ 都遵循该顺序逻辑，无例外
postcss.config.js 必须存在且插件启用正确
即使 postcss-loader 已加入链路，若项目根目录下缺少 postcss.config.js，它会静默跳过处理——你写的 autoprefixer 不生效，压缩也不执行。
最小可用配置示例：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: [
require('autoprefixer')({ overrideBrowserslist: ['>1%', 'last 2 versions'] }),
require('cssnano')({ preset: 'default' })
]
}
- 路径必须是项目根目录（即
package.json所在层），不是src/或styles/ -
autoprefixer的browsers选项已废弃，改用overrideBrowserslist或targets - 如果用了
postcss-import，它只能处理@import语句，不能导入.scss文件——Sass 的@use和@forward仍由sass-loader处理
Source Map 链路要贯通
Sass 编译 + PostCSS 处理后，浏览器开发者工具里看到的行号可能错位。这是因为默认情况下 sass-loader 和 postcss-loader 各自生成一份 Source Map，但未串联。
需显式开启并透传：
-
sass-loader加sourceMap: true -
css-loader加sourceMap: true -
postcss-loader不需额外配置（自动读取上一 loader 的 Source Map） - 最终 devtool 设为
'source-map'或'inline-source-map'
漏掉任意一环，断点会落在压缩后的单行 CSS 上，或直接指向 index.css 而非原始 _button.scss。
不要用 node-sass，优先选 dart-sass
node-sass 已被官方标记为 deprecated（2025 年起不再更新），它生成的 CSS 在某些场景下与 PostCSS 插件行为冲突，比如：
-
cssnano对node-sass输出的 calc() 表达式优化异常，导致布局错乱 -
postcss-custom-properties无法正确识别node-sass输出的变量展开结果 - Windows 下频繁出现
Cannot find module 'node-sass'，尤其搭配 webpack 5+
替换方案简单：
npm uninstall node-sass<br>npm install sass
sass（即 Dart Sass）是官方推荐实现，输出更规范，与 PostCSS 插件兼容性更好，且支持现代 Sass 功能如模块系统（@use）。
_theme.scss 里定义 $primary: blue，又在 _layout.scss 里用 @use 'theme'，PostCSS 对这两者都“看不见”——它只看到最终合并后的 CSS 规则。所有变量、嵌套、混入的展开，必须由 Sass 完全完成，PostCSS 才能安全介入。 
