Webpack中需在browserslist配置目标浏览器，并在postcss-loader的plugins中显式引入autoprefixer()，否则无法自动添加浏览器前缀。
Webpack里怎么配PostCSS自动加浏览器前缀
PostCSS不是预处理器，但它是现代CSS构建链路里最常被误当成“预加载器”的一环。真正要解决的，是autoprefixer这类插件如何在打包时生效，而不是手动写-webkit-。
常见错误现象：display: flex在IE11里不生效，但开发者以为开了postcss-loader就自动兼容了——其实没配browserslist或插件没启用。
- 必须在项目根目录放
browserslist配置文件（或写进package.json的browserslist字段），例如：["> 1%", "last 2 versions", "IE >= 11"]
-
postcss-loader的options.plugins里要显式引入autoprefixer()，不能只靠postcss-preset-env代理（它默认不开autoprefixer） - 如果用Vite，不用配loader，但
vite.config.ts里的css.postcss.plugins仍需手动加autoprefixer()，否则开发服务器也不加前缀
Vue CLI项目中Sass变量跨文件不生效怎么办
Sass的@import和@use行为差异极大，Vue CLI默认用@import，但变量作用域容易失控。
使用场景：你在variables.scss里定义$primary-color: #007bff，但在button.scss里用不了，控制台报Undefined variable。
- 确认
vue.config.js里css.loaderOptions.sass.additionalData是否用了@import注入全局变量（推荐方式），而不是依赖组件内@import - 避免混用
@import和@use：Vue CLI 5+默认用Dart Sass，支持@use，但它不会把@use导入的变量自动暴露给后续@import文件 - 路径别写错：
@import "@/styles/variables"中的@是Webpack alias，Vite里得换成~@/styles/variables或直接用相对路径
Next.js里Tailwind CSS热更新失效，改完tailwind.config.js要重启服务
这不是配置漏了，而是Next.js的CSS处理机制导致的：它把tailwind.config.js当纯配置读取，不监听变更，也不触发样式重编译。
性能影响：每次调darkMode策略或新增theme.extend.spacing都得Ctrl+C再npm run dev，打断开发流。
- 必须在
tailwind.config.js里加content字段，且路径要覆盖所有JSX/TSX文件，例如：content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]，否则即使配置生效，也因扫描不到类名而无法生成对应CSS - 不要在
content里写node_modules，会极大拖慢启动速度；也不要写**/*.css，Tailwind不扫描CSS文件 - 如果用了自定义插件（比如
tailwindcss-animate），确保它导出的是函数，且没有同步读取tailwind.config.js内部状态——否则热更新时模块缓存会导致配置“卡住”
Webpack 5的css-minimizer-webpack-plugin压缩后丢失@layer规则
这是CSS新特性与旧工具链的典型冲突。@layer是CSS Cascading Layers规范，Webpack 5默认用的cssnano v4不识别它，直接删掉整条规则。
错误现象：你写了@layer base { * { margin: 0 } }，构建后CSS里完全消失，但开发环境正常。
- 升级
css-minimizer-webpack-plugin到v4+，并显式指定minimizerOptions.preset为['default', { cssnanoOptions: { preset: ['default', { cssnanoPreset: 'cssnano-preset-advanced' }] } }] - 更稳妥的做法是换用
esbuild-css-plugins或lightningcss-webpack-plugin，它们原生支持@layer、@container等新语法 - 注意
css-minimizer-webpack-plugin的parallel设为true时，某些版本会跳过语法检查，导致@layer被静默丢弃——先关掉试试
Tailwind的@layer、Sass的@use、PostCSS的browserslist，这些都不是“开了就有效”的开关。它们各自有生效前提，且彼此之间存在隐性耦合——比如改了browserslist却忘了清node_modules/.cache，或者用了@use却还在additionalData里@import，结果变量根本传不进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
