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

问题描述

我正在使用 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）一起工作，因为它试图注入样式使用 document.createElement 添加它们（服务器端不存在文档）。所以我尝试迁移到使用 style-loader 来实现这个客户端和服务器端。我看到 mini-css-extract-plugin 确实创建了单独的 CSS 文件，但是（据我所知）它不会让相应的 JS 文件（KhalComponent.js）知道它需要在导入 KhalComponent 时加载 CSS另一个项目。

我没有在这个外部组件库中生成 HTML 文件，因为它只是为了导入组件 JS 和 CSS 内容。

webpack 配置如下：

mini-css-extract-plugin

和 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

我缺少什么或我应该使用什么工具来做到这一点？预先非常感谢您！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）