ReactJS 中的可定制组件库

Question

我正在尝试创建一个可定制的 ReactJS 组件库。为此，我考虑了create-react-library。组件开发几乎完成。我已将所有组件放在单独的目录中，并在 index.js 的帮助下一次性导出所有组件。所有组件也都有关联的本地 scss 文件。这些组件级 scss 文件从另一个 variables.scss 引用，其中包含 scss 变量，例如，

$primaryColor: #ff0000;

$secondaryColor: #000000;

这个问题分为两部分。

1. 我们有什么办法不把scss编译成一个css 发布包。目前 create-react-library 正在编译所有 将 scss 放入名为 dist 的文件夹中，作为 index.css，它没有给出 使用 scss 变量从父项目更新样式的选项。

2. scss 编译问题解决后，我们如何更新 这些来自父项目的变量（开发人员将在 使用创建的包）。

非常感谢任何形式的帮助。

Answer 1

经过几天的研究，我终于解决了这个问题。发布解决方案，以便有人受益。

我们发布时有什么办法不把scss编译成一个css 包裹。目前 create-react-library 正在编译所有的 scss 进入一个名为 dist 的文件夹 index.css，它没有提供选项 使用 scss 变量从父项目更新样式。

对于捆绑，微捆绑提供了开箱即用的create-react-library。我把它移到了rollup，它提供了很多捆绑选项。然后我使用 rollup-plugin-copy 将我的组件（当然没有编译）简单地复制到 dist 文件夹。

  plugins: [
    copy({
      targets: [
        { src: 'src/assets/**/*', dest: 'dist' },
        {
          src: ['src/components/**/*', '!**/*.spec.*'],
          dest: 'dist',
        },
      ],
      verbose: true,
      flatten: false,
    })
   ]

scss 编译问题解决后，我们如何更新 这些来自父项目的变量（开发人员将在其中使用 创建的包）。

如您所见，从我上面的一段代码 sn-p 中，我将关联的资产（主题 css 甚至组件）复制到我的 dist 文件夹中。就我的目的而言，这绰绰有余。我需要做的就是导入我必须给消费者的 scss 文件（到 index.scss 的底部。这很重要，因为即使在从 node_modules 加载样式之前也应该加载需要覆盖的 scss 变量）应用。 请查看sass default values for variables 以了解如何从消费者应用程序更新 scss 变量。