I'm running into some issues when trying to create a component library with RollupJS.

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

I'm building a react component library to be used inside other projects. The library uses css-modules for the styling of the components.
I currently have a basic version of my component library, but when I use it in a Gatsby project, I get a FOUC (because the js gets injected into the head with javascript).
This led mo to extract the CSS and inject it into the head of the consuming application, but I don't think this is the way to go.

我正在构建一个Reaction组件库，以便在其他项目中使用。该库使用css模块来设置组件的样式。我目前有我的组件库的一个基本版本，但是当我在Gatsby项目中使用它时，我得到一个FOUC(因为js是用javascript注入头部的)。这导致mo提取css并将其注入消费应用程序的头部，但我不认为这是可行的方法。

What I would like to accomplish is that each component exposes its own stylesheet so the consuming application can import only the style of the components it needs.
(An even better approach would be that we only need to import the component we need, and it will provide the CSS to the application, but that is phase 2)

我想要完成的是每个组件公开它自己的样式表，这样消费应用程序可以只导入它需要的组件的样式。(更好的方法是，我们只需要导入所需的组件，它将向应用程序提供CSS，但这是阶段2)

My project structure looks like this

我的项目结构如下所示

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

To be able to reference the styles of each component separately I (think) I would need an output structure like

为了能够分别引用每个组件的样式，我(认为)需要如下所示的输出结构

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

I have been fiddling with my rollup setup and got to this point:
The config below gives me one big index CSS file, but depending on how the library will grow, I don’t think it is good practice to always have to include all of the component styles (even those of components that aren’t used)

我一直在摆弄我的汇总设置，并达到了这一点：下面的配置给了我一个很大的索引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,
};

Does anybody know how I could go about letting rollup create the CSS files on component level instead of on library level?
I've gone through the options that rollup and rollup-plugin-postcss have to offer, but I don't see a solution for this issue.

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

The challenge here is that Rollup doesn't naturally partition the CSS the way you want.

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

You can set multiple entry points by using an array or an object in your Rollup config's input field. If you make each component an entry point, Rollup will generate a separate bundle for each, including separate CSS files:

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

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