应将样式写成无框架依赖的纯CSS/PostCSS源码，通过构建输出dist/index.css和dist/index.js两套产物，按框架特性选择子路径导入，确保变量fallback、字体相对路径及兼容性配置。
如何把 CSS 抽成独立 npm 包供多个框架项目使用
能，但不能直接放 .css 文件然后 @import 就完事——不同框架对 CSS 的加载、作用域、变量注入机制完全不同，硬塞会触发样式覆盖、变量未定义、伪类丢失等隐性问题。
核心做法是：把样式写成「无框架依赖」的纯 CSS（或 PostCSS）源码，用构建工具打成 dist/index.css 和 dist/index.js 两套产物，再按需引入。不是“一套 CSS 天然通用”，而是“一套源码可控输出多格式”。
为什么不能直接 npm install my-styles && @import "my-styles"
因为：@import 在 CSS 中是同步阻塞、无模块语义的；Webpack/Vite 对它的处理方式不一致；Vue 的 <style scoped>、React 的 CSS-in-JS、Svelte 的 :global() 都会干扰它。
-
@import不支持条件编译，无法剔除调试用的border: 1px solid red - PostCSS 插件（如
postcss-preset-env）在消费端运行时，可能因版本差异导致color-mix()编译失败 - 若包里用了
var(--primary)，但消费项目没设 :root，就全白屏
PostCSS + 构建配置必须显式声明兼容目标
你写的每一条规则，都要考虑它在 Webpack 5、Vite 4+、Rspack 下是否被正确解析。比如 nesting 语法需要 postcss-nesting，但 Vite 默认不启用，就得在包的 postcss.config.js 里写死：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: {
'postcss-nesting': {},
'postcss-preset-env': { stage: 3 }
}
}
同时，package.json 必须带 "type": "module"，否则 ESM 项目 import my-styles/index.js 会报 ERR_REQUIRE_ESM。
- 产出的
index.css要经过autoprefixer，目标浏览器写死为"defaults and not dead"，别用last 2 versions - 所有颜色/间距变量必须提供 fallback：
color: var(--primary, #007bff)，不能只写var(--primary) - 避免用
@layer——Vue CLI 5 和 Next.js 13 的 CSS 模块层叠逻辑还没对齐
React/Vue/Svelte 各自怎么安全接入
不是统一 import 一个路径，而是按框架特性选入口。包里得提供明确的子路径导出：
- React（配合 emotion/styled-components）：用
import 'my-styles/dist/react.css'，该文件已预编译掉:where()等新语法 - Vue 3（
<style scoped>场景）：只能导入全局重置部分import 'my-styles/dist/reset.css'，组件级样式得靠defineProps+ CSS 变量传入 - Svelte：用
import 'my-styles/dist/svelte.css'，它额外加了:global(.btn) { ... }包裹
最常漏掉的是字体加载策略——@font-face 必须用 url('./fonts/xxx.woff2') 相对路径，且构建时要配 assetInlineLimit: 0，否则 Vite 会转 base64 塞进 JS，而 Webpack 默认不内联，结果字体在某个框架里直接 404。
真正难的不是打包，是让每个框架的 CSS 加载时机、变量注入顺序、伪类展开层级都对齐。变量名冲突、!important 泄露、animation 帧重复注册，这些都不会报错，只会让按钮在 Safari 里点不动、在 SSR 页面里闪一下再变色。
