用 PostCSS + preset-env、UnoCSS 和 cssnano 配置模板统一多项目 CSS 工程化：共享 .browserslistrc、按需生成工具类、标准化压缩，三者解耦可 pin，避免黑盒脚手架维护困境。
用 PostCSS + preset-env 一次性适配多项目浏览器需求
不同项目重复配 Autoprefixer、兼容性规则、CSS 变量降级？别手写 postcss.config.js 了。直接复用官方维护的 @csstools/postcss-plugins 组合，配合 postcss-preset-env 一层配置覆盖 90% 场景。
常见错误是把 browserslist 写死在配置里，导致新项目拉代码后样式炸裂。正确做法是统一放在根目录 .browserslistrc，内容示例：
defaults not dead >= 0.5% iOS >= 12 Android >= 9
然后在 postcss.config.js 中只留核心插件链：
module.exports = {
plugins: [
require('postcss-preset-env')({
stage: 3,
features: { 'custom-properties': true }
}),
require('@csstools/postcss-progressive-custom-properties')
]
}
-
postcss-preset-env自动处理gap、:has()、嵌套等新语法降级 -
@csstools/postcss-progressive-custom-properties解决 CSS 变量 fallback 兼容（IE11/旧 Safari 必开） - 所有项目共享同一份
.browserslistrc，删掉配置文件里的重复声明
用 UnoCSS 替代手写 utility class 生成逻辑
每个新项目都重写 tailwind.config.js 或自定义 utility.css？UnoCSS 更轻、更可控。它不打包预设类名，而是按需解析源码中的类名字符串，实时生成对应 CSS。
立即学习“前端免费学习笔记（深入）”；
初始化只需三步：
- 装包：
npm install -D unocss - 加 vite 插件（Vite 项目）：
import { defineConfig } from 'vite'; import UnoCSS from 'unocss/vite'; export default defineConfig({ plugins: [UnoCSS()] }); - 运行一次
npx unocss --watch生成uno.css，后续开发全靠 on-demand
优势明显：没有 Tailwind 的全量类名体积，也不用为每个项目维护 theme.extend；改个 font-size 只需改 uno.config.ts 里一个对象。
用 cssnano + 配置模板统一压缩行为
不同项目用 css-loader、mini-css-extract-plugin、esbuild 压缩 CSS，结果压缩强度不一致，diff 看着像换了套设计系统。根本解法是剥离构建工具，用标准化的 cssnano 配置模板。
新建 cssnano.config.cjs 放到 monorepo 根目录或 npm 包里：
module.exports = {
preset: ['default', {
mergeLonghand: false, // 避免 margin 合并导致布局偏移
discardComments: { removeAll: true },
zindex: false // 不动 z-index，防止弹窗层级错乱
}]
}
然后在各项目构建配置中显式引入：
- Vite：
css: { postcss: { plugins: [require('cssnano')(require('./cssnano.config.cjs'))] } } - Webpack：
new CssMinimizerPlugin({ minimizerOptions: { preset: require('./cssnano.config.cjs') } })
关键是禁用 mergeLonghand 和 zindex —— 这两个默认开启的选项在真实 UI 中最容易引发隐性 bug。
为什么不用现成的 CSS 框架初始化脚本
很多团队推 create-css-app 类脚手架，但问题在于：它把 PostCSS、UnoCSS、cssnano 全耦合成一个黑盒。一旦某个项目要升级 PostCSS 版本，或临时禁用某项压缩，就得 fork 脚手架、改模板、重新 publish。
真正可持续的做法是拆成三个独立可 pin 的配置文件：postcss.config.js、uno.config.ts、cssnano.config.cjs，全部用相对路径引用，不依赖全局安装或 CLI 工具。
最易被忽略的一点：所有配置文件必须加 "type": "module" 到 package.json，否则 import 语法在 Node 18+ 下会报 ERR_REQUIRE_ESM —— 这个错不会出现在文档里，但每个新项目初始化时都会卡住十分钟。
