react.js 中的组件库，带有 scss 和 webpack

【问题标题】：Component library in react.js with scss and webpackreact.js 中的组件库，带有 scss 和 webpack
【发布时间】：2020-07-30 04:54:19
【问题描述】：

我正在使用 React.js 和 scss 创建自己的组件库，可以跨多个使用反应项目。我正在使用 webpack 来捆绑组件。我已经模块化了我的模块以专门导入单个组件。

import Button from '@myModule/button';

当我将它们与 webpack 捆绑在一起时，我将 css 和 js 分开。因此，在消费应用程序中，我必须全局导入 main.css 文件，并分别导入按钮组件。我可以将按钮相关样式（button.scss）也绑定到 button.js 文件，以便导入按钮组件将在其中定义其样式。

【问题讨论】：

【解决方案1】：

根据您的 webpack 配置，您可以通过在组件文件中的导入来添加特定于组件的样式。

以下是您可能需要的 webpack 条目规则：

{
 test: /\.scss$/,
  use: [
   { loader: 'style-loader' },
   { loader: 'css-loader' },
   { loader: 'sass-loader' },
  ]
}

还在resolve.extensions 数组中添加“.scss”。

然后在你的 Button.jsx 文件中你可以这样做：

import './button.scss';

【讨论】：

是的。我已经在 button.js 文件中包含了 button.scss。我的问题是我想把它打包成组件库，并通过 npm 分发。在新应用程序中要求时，我想将样式打包在组件本身中，我不必全局要求样式..
也许我的问题没有正确，但如果您已将样式导入组件，则库的客户端不需要导入相同的样式表。