在react库中发布css的正确方法是什么？

cs7cruho 于 4个月前发布在 React

关注(0)|答案(2)|浏览(89)

我正在开发我自己的react组件库。我使用rollup来创建构建。我还想将css沿着到一个styles.css文件中。我关心的是用户如何使用它。他们可以简单地使用import { Component1, Component2 } from 'my-library'导入组件，但默认情况下它们没有样式。这可以通过导入css文件来解决：import 'my-library/build/styles.css'但是我觉得这个导入是多余的，我想css文件默认包含在我的库index.js文件中。我不知道我如何才能实现这一点。
我正在使用 rollup 和 rollup-plugin-postcss。
所以我的问题是我怎么做？我应该使用一些汇总插件？我的想法是正确的摆在首位？也许我应该留给用户来决定他们想要如何捆绑，因为我的方法迫使他们使用一些加载器的css文件？

css

来源：https://stackoverflow.com/questions/73567192/what-is-the-right-way-to-ship-css-in-a-react-library

2条答案

按热度按时间

idfiyjo81#

我假设你有extract: 'styles.css'或你有inject: false在你的postcss选项。
如果是这种情况，您可以执行以下操作：

postcss({
        //use the following if you want to use CSS modules
        modules: {
          namedExport: true,
          //minify classnames
          generateScopedName: '[hash:base64:8]',
        },
        //comment out the following 2 lines if you want to include your styles in index.js
        /*extract: 'styles.css',
        inject: false,*/
        minimize: true,
        sourceMap: true,
        extensions: ['.scss', '.css'],
        use: ['sass'],
      }),

字符串

赞(0）回复(0）举报 4个月前

iyzzxitl2#

如果你想发布外部样式（而不是像Emotion这样的CSS-in-JS系统），这种“冗余导入”的方式是标准的，因为你不知道你的库的用户希望如何将样式应用到他们的页面上，或者他们想使用哪个加载器（或编译器！）。
也有可能根本没有文档可供注入样式，以防您的用户在服务器端渲染要在客户端进行水合的组件。

赞(0）回复(0）举报 4个月前