React Typescript NPM包打包External CSS及Bootstrap样式方案咨询

下面按适用场景优先级给出可落地的方案：

方案1：抽离独立CSS文件（通用场景首选） #

这是对外发布公共组件库的最优选择，平衡了体积、灵活性和兼容性：

• 将Bootstrap声明为peerDependencies而非生产依赖，避免用户项目中出现多版本Bootstrap冗余
• Rollup配置中引入rollup-plugin-postcss，开启extract: true配置，将所有组件引用的Bootstrap样式、自定义样式统一抽离为独立的index.css文件输出到dist目录
• 组件代码中仅引入实际用到的Bootstrap模块，比如仅用到按钮和栅格时，只引入bootstrap/scss/buttons.scss、bootstrap/scss/grid.scss，不要全量引入Bootstrap全量样式，大幅减少打包体积
• 在package.json中新增样式入口配置："style": "dist/index.css"，用户安装依赖后可直接通过import 'your-package-name/dist/index.css'引入全量样式，也可单独引入单个组件对应的样式文件实现按需加载
• 优势：无全局样式污染风险，支持用户通过覆盖Bootstrap SCSS变量自定义主题，样式文件可单独被浏览器缓存，打包体积最小

方案2：CSS-in-JS内嵌样式（无额外样式引入需求场景） #

适合期望用户开箱即用、不需要单独引入样式的内部组件库场景：

• 搭配rollup-plugin-styles和CSS-in-JS库（比如emotion、styled-components），将用到的Bootstrap样式编译后内嵌到组件的JS/TS产物中
• 开启modules: true配置，给所有Bootstrap类名添加唯一哈希后缀，彻底避免和用户项目的类名冲突
• 优势：用户安装后无需额外引入样式，开箱即用
• 劣势：会增加JS产物体积，样式无法单独缓存，用户自定义主题的成本较高

方案3：全量打包Bootstrap样式（仅内部使用场景） #

仅适合团队内部使用、确定用户项目中没有其他Bootstrap依赖的场景，不推荐对外发布的公共组件库使用：

• 在组件库入口文件全量引入Bootstrap全量CSS，Rollup配置中直接将样式统一打包输出
• 优势：配置成本最低
• 劣势：产物体积大，极易和用户项目中的现有Bootstrap版本、全局样式产生冲突

通用注意事项 #

• 若组件用到Bootstrap的交互JS能力（例如下拉菜单、模态框），同样要将Bootstrap JS相关依赖声明为peerDependencies，不要打包到组件产物中
• Storybook本地开发用的Bootstrap样式，统一在.storybook/preview.js中引入，不要纳入Rollup的生产打包范围

内容的提问来源于stack exchange，提问作者72GM