如何解决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 举报，一经查实，本站将立刻删除。
