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

Question

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

我正在构建一个反应组件库以在其他项目中使用。该库使用 css-modules 来设计组件的样式。 我目前有一个基本版本的组件库，但是当我在 Gatsby 项目中使用它时，我得到了一个 FOUC （因为 js 通过 javascript 注入到 head 中）。 这导致 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,
};

有人知道我如何让 rollup 在组件级别而不是库级别创建 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',
  }
};