Autoprefixer不生效的根本原因是PostCSS未正确加载插件、browserslist配置不当或下游工具（如cssnano）误删前缀；需确保postcss.config.js正确导出插件、browserslist明确兼容目标、禁用cssnano内置autoprefixer并清理构建缓存。
为什么 Autoprefixer 插件生成的 CSS 不生效？
Autoprefixer 本身不生成样式，只给已有 CSS 添加浏览器前缀。如果你期待它“自动生成 flex 布局代码”，那会落空——它只处理 display: flex 这类已写好的声明。
真正能快速生成样式代码的，是像 Ember Snippets、CSS Peek 或更直接的 Auto Rename Tag 配合手写片段（snippets）这类插件。
- 检查是否启用了 VSCode 内置的
"editor.quickSuggestions"，关闭后emmet的缩写（如d:f→display: flex）不会触发 - 确保当前文件语言模式设为
CSS或SCSS（右下角点击切换），否则emmet缩写默认不激活 - 某些插件（如
IntelliSense for CSS class names）依赖tailwind.config.js或postcss.config.js存在才能补全类名，不是“装了就自动有”
如何用 Emmet 快速写出常用布局样式？
VSCode 自带 Emmet，无需额外安装插件，但得知道哪些缩写对应什么 CSS 规则。比如：
d:f → display: flex;jcs:a → justify-content: space-around;ai:c → align-items: center;
- 缩写不区分大小写，但建议小写（
bgc:#333比BGC:#333更稳定） - 数值单位默认是
px，写m10是margin: 10px;；加rem要显式写m10rem - 多值属性（如
padding）支持简写：p10-20→padding: 10px 20px;，但p10-20-30不会自动转成三值，得写p10-20-30-40或手动补全
自定义 snippets 让重复样式一键插入
硬记缩写效率低，不如把高频样式存成自定义代码片段。例如常用卡片阴影 + 圆角组合：
{
"card-shadow": {
"prefix": "card",
"body": [
"border-radius: $1px;",
"box-shadow: 0 2px 8px rgba(0,0,0,0.1);",
"background: $2;"
],
"description": "Card base style"
}
}
存到 ~/.vscode/snippets/css.json 后，在 CSS 文件里输入 card + Tab 就能展开。
- 变量用
$1、$2表示光标停靠位置，按Tab切换；$0是最终退出点 - 如果片段含双引号，需用反斜杠转义：
"content": "transform: translateX($1px);" - 不要把复杂逻辑（如媒体查询嵌套）塞进 snippet——维护成本高，且容易和 PostCSS 处理冲突
PostCSS 插件链里谁负责“生成”？
很多人混淆了“生成”和“转换”。postcss-preset-env 可以把 color-mix() 编译成兼容写法，但它不凭空造出新规则；cssnano 压缩代码，也不生成。
真正接近“生成”的是 postcss-custom-properties，它能把 color: var(--primary) 替换成实际值——但这依赖你提前定义好 :root { --primary: #007acc; }。
- 若想让变量定义和使用自动联动，得配合
stylelint+stylelint-config-standard提前校验，否则var(--missing)会静默失效 - VSCode 的
PostCSS Language Support插件只提供语法高亮，不执行编译；要看到生成结果，必须运行postcss input.css -o output.css - 热更新时（如 Vite/HMR），CSS-in-JS 或 Tailwind 的 JIT 模式才是“实时生成”的主力，VSCode 插件只是辅助编辑
样式生成从来不是单点工具的事——Emmet 负责起步，snippets 负责复用，PostCSS 负责兼容性落地。漏掉任意一环，都会卡在“写了但没完全生效”的状态里。
