我在React中用webpack@5.24.2和mini-css-extract-plugin@1.3.9制作了一个树抖动组件库，它必须能用于客户端渲染和服务器端渲染。我希望能够做以下事情，在库中创建“N”个组件，每个组件都有自己特定的“SCSS”文件，类似于：
第一个
以及外部项目执行以下操作时：import KhalComponent from 'some-library/KhalComponent'，它获取组件及其样式。我在style-loader中使用了此配置，但我了解到这不是用于生产的正确配置，并且它不适用于SSR（使用NextJS），因为使用style-loader时，它会尝试注入样式，并将其添加到document.createElement中（文档不存在于服务器端）。所以我尝试迁移到使用mini-css-extract-plugin来实现这个客户端和服务器端。我发现mini-css-extract-plugin确实创建了单独的CSS文件，但是（据我所知）它不会让相应的JS文件（KhalComponent.js）知道，每当KhalComponent导入到另一个项目中时，它都需要加载CSS。
我没有在这个外部组件库中生成HTML文件，因为它只是导入组件JS和CSS内容。
Webpack配置如下：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const entries = require('./entries');
const LIB_NAME = 'lib';

module.exports = {
  entry: entries,
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, LIB_NAME),
  },
  plugins: [new CleanWebpackPlugin(), new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  externals: [
    {
      react: 'react',
      'react-dom': 'react-dom',
    },
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  devtool: 'source-map',
  devServer: {
    contentBase: './lib',
    hot: true,
  },
};

和entries.js是：

const path = require('path');

const SRC_DIR = path.resolve('src');

module.exports = {
  // Components
  KhalComponent: path.join(SRC_DIR, 'KhalComponent'),
  LinkComponent: path.join(SRC_DIR, 'LinkComponent'),
};

我错过了什么或者我应该用什么工具来做这件事？提前非常感谢！