我可以使用 RollupJs 为我的组件库生成组件级 css 文件吗？

Question

我在尝试使用 RollupJS 创建组件库时遇到了一些问题。

我正在构建一个要在其他项目中使用的反应组件库。该库使用 css-modules 来设置组件的样式。我目前有一个基本版本的组件库，但是当我在 Gatsby 项目中使用它时，我得到了一个 FOUC（因为 js 被 javascript 注入到头部）。这导致 mo 提取 CSS 并将其注入到消费应用程序的头部，但我不认为这是要走的路。

我想要完成的是每个组件都公开自己的样式表，因此消费应用程序只能导入它需要的组件的样式。（更好的方法是我们只需要导入我们需要的组件，它就会为应用程序提供 CSS，但那是第 2 阶段）

我的项目结构是这样的

- src
  - components
    - component_1
        * index.js
        * styles.module.scss
    - component_2
        * index.js
        * styles.module.scss

为了能够分别引用每个组件的样式，我（认为）我需要一个输出结构，如

- dist
  - modules
    - components
      - component_1
        * … (files generated by rollup)
        * styles.css
      - component_2
        * … (files generated by rollup)
        * styles.css

我一直在摆弄我的汇总设置并到了这一点：下面的配置给了我一个大的索引 CSS 文件，但是根据库的增长方式，我认为始终必须包含所有内容并不是一个好习惯组件样式（即使是未使用的组件样式）

import babel from "rollup-plugin-babel";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import resolve from "rollup-plugin-node-resolve";
import prettier from "rollup-plugin-prettier";

export default {
    input: "src/index.js",
    output: [
        {
            dir: "build/modules",
            format: "esm",
            exports: "named",
            sourcemap: true,
        },
        {
            dir: "build/common",
            format: "cjs",
            exports: "named",
            sourcemap: true,
        },
    ],
    plugins: [
        peerDepsExternal(),
        resolve(),
        prettier({ parser: "babel" }),
        postcss({
            modules: true,
            extract: true,
        }),
        babel({
            exclude: "node_modules/**",
        }),
    ],
    external: ["react", "react-dom"],
    preserveModules: true,
};

有人知道我如何让汇总在组件级别而不是库级别创建 CSS 文件吗？我已经浏览了 rollup 和 rollup-plugin-postcss 必须提供的选项，但我没有看到这个问题的解决方案。

Answer 1

这里的挑战是 Rollup 并不能按照您想要的方式自然地划分 CSS。

您可以通过在 Rollup 配置的输入字段中使用数组或对象来设置多个入口点。如果将每个组件作为入口点，Rollup 将为每个组件生成一个单独的包，包括单独的 CSS 文件：

export default {
  input: {
    'component_1': 'src/components/component_1/index.js',
    'component_2': 'src/components/component_2/index.js',
  }
};