react.js 中的組件庫，帶有 scss 和 webpack

Question

我正在使用 React.js 和 scss 創建自己的組件庫，可以在多個 React 項目中使用。 我正在使用 webpack 來捆綁組件。 我已經模塊化了我的模塊以專門導入單個組件。

import Button from '@myModule/button';

當我將它們與 webpack 捆綁在一起時，我將 css 和 js 分開。 因此，在消費應用程序中，我必須全局導入 main.css 文件，並分別導入按鈕組件。 我可以將按鈕相關樣式（button.scss）也綁定到 button.js 文件，這樣，導入按鈕組件將在其中定義其 styles。

Answer 1

根據您的 webpack 配置，您可以通過在組件文件中的導入來添加組件特定的 styles。

以下是您在 webpack 條目的規則中可能需要的內容：

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

還在resolve.extensions數組中添加“.scss”。

然后在您的 Button.jsx 文件中，您可以執行以下操作：

import './button.scss';