Rollup打包React组件库时将React纳入bundle及AntD样式覆盖问题

问题1：Rollup将完整React打包进Bundle，导致库无法正常导入 #

问题根源 #

你的配置里存在几个关键错误：

1. package.json入口配置错误：main字段指向了源码src/index.js，而不是打包后的产物，导致项目导入时直接加载未编译的源码；
2. Rollup配置重复定义output：配置对象里写了两次output，这会导致配置逻辑失效；
3. External依赖配置冲突：手动指定的external数组和rollup-plugin-peer-deps-external插件的自动处理逻辑重复，可能导致部分依赖未被正确标记为外部依赖。

修复步骤 #

1. 修正package.json的入口字段：
   将main和module指向dist目录下的打包产物，同时添加unpkg字段优化CDN使用：

   {
     "main": "dist/bundle.cjs.js",
     "module": "dist/bundle.esm.js",
     "unpkg": "dist/bundle.umd.js",
     // ...其他字段保持不变
   }
   

2. 修复Rollup的output配置并优化External处理：
   删除重复的output字段，合并为多格式输出，同时让rollup-plugin-peer-deps-external自动处理peer依赖（不需要手动写external数组，若有额外非peer依赖需要排除再手动添加）：

   export default [
     {
       onwarn: discardWarning,
       input: 'src/index.js',
       // 移除手动external数组，由peer-deps-external自动处理peer依赖
       output: [
         {
           file: pkg.main,
           format: 'cjs',
           exports: 'named',
           sourcemap: true,
           globals: {
             react: 'React',
             'react-dom': 'ReactDOM',
             antd: 'antd',
             '@ant-design/icons': '@ant-design/icons',
             'react-notification-system': 'reactNotificationSystem'
           }
         },
         {
           file: pkg.module,
           format: 'esm',
           exports: 'named',
           sourcemap: true
         }
       ],
       plugins: [
         // 确保peer-deps-external第一个执行，优先标记外部依赖
         external(),
         postcss({ 
           extract: true, 
           modules: {
             auto: /\.module\.(scss|sass)$/, // 提前配置第二个问题的修复
             generateScopedName: '[name]__[local]___[hash:base64:5]'
           }, 
           use: ['sass'] 
         }),
         babel({
           babelrc: false,
           presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
           extensions: EXTENSIONS,
           exclude: [
             'node_modules/**',
             'src/*/*.stories.js',
             'src/*/*.spec.js',
             'src/*/*.test.js'
           ]
         }),
         commonjs({ include: /node_modules/ }),
         replace({ 'process.env.NODE_ENV': JSON.stringify(env) }),
         resolve(),
         env === 'production' && terser()
       ].filter(Boolean), // 过滤非生产环境下的undefined插件
     }
   ];
   

3. 验证修复：
   执行npm run build后，检查dist目录下的bundle文件，搜索React关键字，应该不会出现完整的React源码，只会保留外部引入的标识。

问题2：非SCSS Modules的类被重命名，所有类被提取到单个文件 #

问题根源 #

你的rollup-plugin-postcss配置中modules: true，这会让所有SCSS文件都被当作CSS Modules处理，不管文件名是否带.module后缀，导致全局样式的类名也被强制重命名。

修复步骤 #

1. 配置PostCSS仅对特定后缀文件启用Modules：
   修改postcss插件的modules选项，只对.module.scss或.module.sass文件启用CSS Modules：

   postcss({
     extract: true, // 保留样式提取到单个文件的行为
     modules: {
       auto: /\.module\.(scss|sass)$/, // 自动识别模块样式文件
       generateScopedName: '[name]__[local]___[hash:base64:5]' // 自定义模块化类名格式，可选
     },
     use: ['sass']
   }),
   

2. 分离全局样式与模块样式：

   • 将AntD的覆盖样式放在普通的.scss文件中（比如src/styles/global.scss），这些样式的类名不会被重命名；
   • 组件的私有样式使用.module.scss后缀，确保类名被隔离重命名；
   • 在库的入口文件src/index.js中按顺序导入样式，保证覆盖优先级：

     // 先导入AntD默认样式
     import 'antd/dist/antd.css';
     // 再导入你的全局覆盖样式，确保优先级更高
     import './styles/global.scss';
     // 最后导入组件（组件内部导入各自的.module.scss）
     import './components/Button';
     

3. 验证修复：
   打包后查看dist目录下的css文件，全局样式的类名（比如AntD的.ant-btn）应该保持原样，而组件模块样式的类名会变成类似Button__primary___3x2Yz的隔离格式。

内容的提问来源于stack exchange，提问作者Usman Tahir