Bit 中 CSS 片段不能跨项目 import 或 @import 生效，因 Bit 组件独立构建发布、不处理 CSS 模块解析，需以相对路径发布样式文件并由消费项目自行配置构建工具支持。
Bit 中 CSS 片段不能直接 import 或 @import 跨项目生效
Bit 的组件是独立构建、独立发布、独立消费的，它不提供运行时 CSS 注入机制。你不能在 Bit 组件里写 import "@/styles/button.css" 然后指望这个路径在消费项目中被解析成功——@/ 别名只在原项目构建上下文中有效，Bit 打包时会忽略这类非相对路径的 JS import，也不会处理 CSS 文件的模块解析。
常见错误现象：组件本地跑正常，但发布到 Bit registry 后，在其他项目中 bit import 消费该组件，样式完全丢失或报 Cannot find module "@/styles/button.css" 错误。
- Bit 导出的是组件源码（含
.css或.module.css），不是构建产物；CSS 文件必须随组件一起发布，并且路径需为相对路径（如./button.css） - 消费项目必须自行配置构建工具（Vite/Webpack）支持 CSS 加载，Bit 不接管这一层
-
@import在.css文件里会被 Bit 忽略——它不走 PostCSS 流程，也不解析 CSS 预处理器语法
正确做法：把 CSS 片段作为 Bit 组件发布，而非“引入”
Bit 的设计哲学是“组件即单元”，样式应和组件逻辑绑定在同一发布单元内。想复用按钮样式？就发布一个 @myorg/ui-button 组件，而不是试图把 button.css 单独拎出来复用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 将样式文件（如
button.css）和组件文件（button.tsx）放在同一目录，用相对路径import "./button.css" - 确保
button.css不依赖外部变量或别名路径；所有引用必须可静态分析（如@import "./reset.css"只在同目录下有效） - 若需主题变量，用 CSS 自定义属性（
var(--btn-bg)），并在消费项目根节点上设置，Bit 组件不负责注入:root - 发布前运行
bit build验证样式是否被正确包含进 dist —— 查看生成的dist/button.css是否存在且内容完整
跨项目共享 CSS 变量或工具类，用 npm 包 + :where() 封装
如果你真需要复用纯样式片段（比如一套间距工具类 m-2、p-4），不要靠 Bit 引入 CSS 文件，而是把它做成一个独立 npm 包，例如 @myorg/css-tokens。
关键点在于封装方式：
- 导出的是 CSS 文件本身（
index.css），不是 JS 模块；消费项目通过import "@myorg/css-tokens/index.css"显式加载 - 用
:where()降低选择器权重，避免污染：例如:where(.m-2) { margin: 0.5rem; }，这样即使消费项目已有.m-2，也不会被意外覆盖 - 禁止在该包里使用
@import或依赖构建别名；路径全部用相对引用，确保 npm install 后能直接被 Vite/Webpack 解析 - 若搭配 CSS Modules 使用，必须明确告知消费者：该包不提供
className对象，只提供全局类名，需自行控制作用域（如用scoped或Shadow DOM）
Bit + CSS Modules 跨项目复用的陷阱
很多人以为发布 button.module.css 就能直接复用类名，结果发现消费项目里 styles.primary 指向的哈希类名和原项目不一致——这不是 Bug，是预期行为。
原因很直接：CSS Modules 的哈希由本地构建配置决定（如 localIdentName），Bit 不固化该配置，消费项目用自己的 Webpack/Vite 规则重新哈希。
- 唯一可靠方式：把
button.module.css源文件作为 npm 包发布，消费项目import styles from "@myorg/ui-button/button.module.css" - 两个项目必须共用完全一致的 CSS Modules 配置（包括
localIdentName、modules开关、icss支持等），否则类名字符串不匹配 - 零配置方案不存在；如果团队无法统一构建配置，就放弃 CSS Modules 类名复用，改用 CSS 变量 + 原生类名（如
btn btn--primary）
import 能穿透 Bit 边界——它不能。 
