reactjs - mini-css-extract-plugin：仅在导入 JS 文件时导入 CSS 文件

Question

我正在使用 webpack@5.24.2 和 mini-css-extract-plugin@1.3.9 在 React 中制作一个摇树组件库，它必须适用于客户端渲染和服务器端渲染。我希望能够执行以下操作，在库中创建“N”个组件，每个组件都有其特定的“SCSS”文件，如下所示：

// KhalComponent.tsx
import React from 'react';
import './KhalComponent.scss';

const KhalComponent = () => {
  return <div className="khal-component">Khal Component</div>;
};

export default KhalComponent;

// KhalComponent.scss
.khal-component {
  padding: 2rem;
  background: red;
}

当外部项目执行以下操作时： import KhalComponent from 'some-library/KhalComponent'它会获取组件及其样式。我有这个工作，style-loader但我读过这不是一个正确的生产配置，它不适用于 SSR（使用 NextJS），因为style-loader它试图注入添加它们的样式 document.createElement（文档没有' t 存在于服务器端）。所以我尝试迁移到使用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'),
};

我错过了什么或者我应该使用什么工具来做到这一点？非常感谢您！

标签： reactjswebpacksasstree-shakingmini-css-extract-plugin