Lerna 发布时子包样式丢失是怎么回事?

极客可欣 阅读 5

我用 Lerna 管理一个多包项目,其中一个子包导出了一些 CSS 组件。本地开发没问题,但执行 lerna publish 发布后,其他项目引入这个包时样式完全没生效,控制台也没报错。

我检查了发布的文件,CSS 文件确实被打包进去了,但样式没应用上。是不是构建配置有问题?下面是我组件里用的 CSS:

.my-button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

试过在主项目手动 import 这个 CSS 文件也不行,很奇怪,求解!

我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
Mr-茜茜
Mr-茜茜 Lv1
遇到这种问题,通常是因为打包后的文件路径不对或者没有正确引入。检查一下你的打包配置,确保 CSS 文件被打包到了正确的位置,并且被正确引用。

你可以在 Lerna 的子包 package.json 里添加 style 字段,指定主样式文件的路径,这样外部项目引入时可以直接找到 CSS 文件。比如:
"style": "dist/style.css"

然后确保你的构建脚本(可能是 Webpack 或 Rollup)正确地将 CSS 文件打包到 dist 目录下。

在主项目里引入子包时,确保你已经安装了该子包的最新版本,然后尝试手动 import 那个 CSS 文件,看看能不能解决问题。复制过去试试,有时候这样能发现问题所在。

如果还是不行,检查一下打包后的文件结构,确保路径一致。有时候多看几遍配置,也能发现问题。
点赞
2026-03-23 21:03