SCSS与postcss-preset-env各司其职：SCSS处理预处理语法（如@mixin、嵌套、$变量），postcss-preset-env转译原生CSS未来特性（如nesting-rules、var()），二者不可混用嵌套或变量系统，需明确分工以避免重复编译、语义冲突和兼容性失效。
SCSS 和 postcss-preset-env 不是替代关系，也不是简单叠加关系——它们在构建链中各司其职：SCSS 负责编译预处理语法（@use、@mixin、嵌套等），postcss-preset-env 负责将原生 CSS 未来特性（如 nesting-rules、custom-properties）转译为兼容代码。混用时若不明确分工，极易出现重复嵌套、变量未定义、或 stage 生效异常等问题。
SCSS 嵌套和 postcss-preset-env 的 nesting-rules 别同时开
两者都支持嵌套语法，但语义和编译时机完全不同：postcss-preset-env 的 nesting-rules 是对标准 CSS 原生嵌套（& .child）的转译；而 SCSS 的嵌套是预处理器阶段展开的，输出的是普通 CSS 选择器。如果同时启用，会出现两层嵌套展开，导致选择器爆炸或权重错乱。
- ✅ 正确做法：项目中只保留一种嵌套来源。推荐关闭
postcss-preset-env的nesting-rules，完全由 SCSS 处理嵌套逻辑 - ⚠️ 错误现象：
.card { & .title { color: red; } }经 SCSS 编译后已是.card .title，再被nesting-rules处理会报错或静默忽略 - ? 若坚持用原生 CSS 嵌套（比如为了后续迁移到纯 CSS），那就禁用 SCSS 嵌套能力（不用
&，改用完整选择器），并确保stage: 3+features: { 'nesting-rules': true }
自定义属性（CSS 变量）必须由 SCSS 预处理后交给 postcss-preset-env
postcss-preset-env 只能处理运行时生效的 --var，无法识别 SCSS 变量（$color）。但反过来，SCSS 也不能直接读取 var(--color) 的值做计算——二者作用域隔离。
- ✅ 推荐流程：SCSS 中定义设计令牌（
$primary: #007bff），用#{}注入到:root块中生成--primary-color: #007bff，再由postcss-preset-env确保var(--primary-color)在旧浏览器中 fallback - ❌ 避免写法：
.btn { background: var($primary) }—— SCSS 不认识var()，会原样输出导致无效 - ⚙️ 注意
postcss-preset-env对custom-properties的降级依赖browserslist：若目标浏览器已原生支持（如 Chrome 49+），它不会插入 fallback；只有当检测到不支持时，才尝试用声明顺序或 JS 补充（需额外插件）
PostCSS 配置里别漏掉 autoprefixer，且 browserslist 必须显式声明
postcss-preset-env 内部虽调用 autoprefixer，但默认行为不保证覆盖所有场景（尤其是 @supports 块内属性或新语法中的老属性）。若没单独配置 autoprefixer 插件，部分前缀可能缺失。
- ✅ 正确配置（
postcss.config.js）：module.exports = { plugins: [ require('postcss-preset-env')({ stage: 3, features: { 'custom-properties': true } }), require('autoprefixer')({ overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead'] }) ] } - ⚠️ 常见坑：仅靠
package.json中的browserslist字段，autoprefixer可能不读取（尤其在某些 Webpack 版本或 Vite 插件链中），必须显式传参 - ? 验证方式：写一条
display: flex，看输出是否含-webkit-box；若无，说明autoprefixer未生效
SCSS 模块系统（@use）与 postcss-preset-env 的 scope 冲突要手动规避
SCSS 的 @use 会把变量/混入封装进命名空间，但 postcss-preset-env 处理的是最终合并后的 CSS 字符串，无法感知模块边界。这意味着：全局 :root 中定义的 --color 会被所有模块共享，但 SCSS 的 $color 不会自动同步过去。
- ✅ 实践建议：把设计令牌（颜色、间距、断点）统一放在一个 SCSS 文件（如
_tokens.scss）中，用@use导出，并在顶层:root中通过@include或插值注入为 CSS 变量 - ⚠️ 容易忽略的点：主题切换依赖 CSS 变量动态重设，但 SCSS 变量是编译期静态的——不能指望
$theme: dark改变后自动刷新--bg值，必须靠 JS 或多份 CSS 输出实现 - ? 若需运行时主题，放弃 SCSS 变量主导，改用纯 CSS 变量 +
postcss-preset-env+ JS 控制类名切换
真正难的不是配置插件，而是厘清哪些逻辑该由 SCSS 承担（编译期抽象、复用、条件生成），哪些该留给 postcss-preset-env（运行时兼容、标准化降级、浏览器能力适配）。一旦混淆，调试成本远高于重写一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
