ReactJS 中的可定制组件库

Question

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

$primaryColor: #ff0000;

$secondaryColor: #000000;

这个问题有两个部分。

有没有办法不把scss编译成一个css 发布包。目前create-react-library正在编译所有将 scss 放入名为 dist 的文件夹中作为 index.css，它不提供使用 scss 变量从父项目更新样式的选项。
scss编译问题解决后，如何更新来自父项目的这些变量（开发人员将在其中使用创建的包）。

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

Answer 1

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

Is there any way to not compile the scss into one css when we publish the package. Currently create-react-library is compiling all the scss into a folder named dist as index.css, which doesn't give the option to update styles from parent project with scss variables.

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

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

Once the issue with scss compilation is solved, how can we update these variables from a parent project (where developers will be using the package created).

如您所见，从我上面的代码片段中，我正在将关联的资产（主题 css 甚至组件）复制到我的 dist 文件夹中。就我的目的而言，这已经足够了。我需要做的就是导入 scss 文件（到 [=27= 的底部）。这很重要，因为需要覆盖的 scss 变量甚至应该在样式是从 node_modules) 加载到消费者应用程序的。请查看 sass default values for variables 以了解如何从消费者应用程序更新 scss 变量。

ReactJS 中的可定制组件库

Customisable component library in ReactJS

sass

reactjs

npm-publish

npm-install

create-react-app