Rollup打包后CSS无法在外部项目加载的问题解决求助

我基于React+TypeScript用Rollup打包组件库，生成的bundle导入到其他项目后，组件CSS样式不生效——打包后能看到生成的.css文件，但不会自动加载。试过配置css({ output: 'styles.css' })也没用，请问怎么改配置才能让CSS在外部项目导入时生效？

我的配置与代码 #

Rollup配置 #

import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import css from 'rollup-plugin-import-css';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default [
  {
    input: 'src/index.tsx',
    output: {
      file: 'dist/bundle.js',
      format: 'iife',
      name: 'MyApp',
      sourcemap: true,
    },
    plugins: [
      resolve({ extensions }),
      commonjs(),
      css(),
      typescript({
        tsconfig: 'tsconfig.json',
      }),
    ],
  },
  {
    input: 'src/index.tsx',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: 'dist/esm/index.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      resolve({ extensions }),
      commonjs(),
      css(),
      typescript({
        tsconfig: 'tsconfig.json',
      }),
    ],
  },
];

React组件导入CSS #

import React from 'react'
import './styles.css'

export default function MyComponent() {
  return <div className="myClass">Hello World</div>
}

解决方案 #

问题核心是rollup-plugin-import-css默认仅提取CSS到单独文件，但不会自动让JS bundle触发加载逻辑。针对不同输出格式，有不同的解决方式：

1. 针对IIFE格式（浏览器直接运行）：自动注入CSS #

修改IIFE配置中的css插件，开启inject选项，让生成的JS自动加载CSS文件或注入到页面：

css({
  output: 'dist/styles.css', // 指定CSS输出路径
  inject: true, // 自动在JS中添加加载CSS的逻辑
})

打包后的IIFE bundle在浏览器运行时，会自动加载对应的CSS文件，无需手动引入。

2. 针对CJS/ESM模块（供其他项目导入）：规范输出并告知使用者 #

这是组件库的常规做法，提取单独CSS文件，同时在package.json中配置style字段，让外部项目可以手动引入或被工具自动识别：

• 第一步：修改CSS插件配置，统一输出路径

css({
  output: 'dist/styles.css',
})

• 第二步：在项目根目录的package.json中添加字段：

{
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "style": "dist/styles.css" // 告诉工具和使用者CSS文件位置
}

外部项目导入时，可手动引入CSS：

import MyComponent from 'your-package-name';
import 'your-package-name/dist/styles.css';

Vite、Webpack等工具会自动识别style字段，部分场景下能自动引入CSS。

3. 将CSS内联到JS（仅小体量组件用，不推荐） #

如果一定要让CSS随JS自动加载，可将CSS内联到JS中，运行时动态插入到页面：

css({
  inline: true, // 把CSS转换成JS模块，动态创建style标签注入页面
})

优点是无需额外处理，缺点是会增大JS体积，无法利用浏览器的CSS缓存机制。

修改后的完整Rollup配置示例 #

import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import css from 'rollup-plugin-import-css';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default [
  {
    input: 'src/index.tsx',
    output: {
      file: 'dist/bundle.js',
      format: 'iife',
      name: 'MyApp',
      sourcemap: true,
    },
    plugins: [
      resolve({ extensions }),
      commonjs(),
      css({
        output: 'dist/styles.css',
        inject: true,
      }),
      typescript({
        tsconfig: 'tsconfig.json',
      }),
    ],
  },
  {
    input: 'src/index.tsx',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: 'dist/esm/index.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      resolve({ extensions }),
      commonjs(),
      css({
        output: 'dist/styles.css',
      }),
      typescript({
        tsconfig: 'tsconfig.json',
      }),
    ],
  },
];

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