Question

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

我正在构建一个React组件库，供其他项目使用。该库使用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文件吗？我已经了解了汇总和汇总插件-postcss所提供的选项，但是我没有找到解决此问题的方法。

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

0 个答案: