Javascript 从节点_模块导入的React/Webpack Css未正确加载

我从不同的软件包中使用以下三种css导入：

//要导入'path/to/css.css'
从“slick carousel/slick/slick.css”导入slickCss
从“slick carousel/slick/slick theme.css”导入SlickCSTheme
从“传单/目录/传单.css”导入leafcss
log（`Slick Css:`，slickCss）
log（`Slick-Theme-Css:`，slickCssTheme）
log（`leafcss:`，leafcss）

如果我注销这些，它们都是空对象：

Slick Css:  {}
Slick Theme Css:  {}
leaf css:  {}

我假设我使用webpack加载程序的方式出了问题。在大多数情况下，我可以看到其他一切都在正常工作。现在我将把我的网页附在不太复杂的东西上。如果网页没有问题，我将开始添加必要的文件。我尝试了别名，但仍然得到了相同的结果

var path=require（`path`）
module.exports={
模式：`发展'，
条目：`./scripts/inject.js`，
输出：{
path:path.resolve（uu dirname，`dist`），
文件名：`bundle.js`，
},
决心：{
扩展名：[`.html`、`.js`、`.json`、`.scss`、`.css`]，
别名：{
leafModule:\uuu dirname+`/node\u modules/mobile/dist/mobile.css`，
},
},
模块：{
规则：[
{
测试：/\（png | jpe？g | gif）$/i，
使用：[
{
加载器：`file loader`，
},
],
},
{
测试：/\（woff（2）| ttf | eot | svg）（\？v=\d+\.\d+\.\d+）$/，
使用：[
{
加载器：`file loader`，
选项：{
名称：`[name].[ext]`，
outputPath:`fonts/`，
},
},
],
},
{
测试：/\.css$/i，
用法：['style loader`、'css loader`]，
},
{
测试：/\.js$/,，
排除：/node_模块/，
使用：{
加载器：`babel loader`，
选项：{
预设：[`@babel/preset env`]，
},
}, 
},  
],
}, 
}

我不确定您的设置是否能够正确收集您的样式。在我看来，你可以使用

迷你css提取插件来帮助你收集css。以下是您可以添加到
webpack.config.js
的附加代码：

const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）
module.exports={
// ...
模块：{
规则：[
{
测试：/\.css$/i，
使用：[
{
加载器：MiniCssExtractPlugin.loader，
},
{
加载器：`css加载器`，
选项：{
//启用css作为模块，以便我们可以导入
模块：对，
},
},
],
},
],
},
插件：[
// ...
新的MinicsSextract插件({
文件名：'[name].css'，
chunkFilename:“[id].css”，
}),
]
}

但是，请记住，如果您将css切换到模块，它将不再自动注入，因为每个类名都将被重命名，因此您必须手动导入和添加，如：

从“path/to/css”导入css；

因此，您将在第三个软件包中遇到问题，这些软件包中有css文件要作为您的案例导入。
添加
模块后仍然是空对象：true
您是否有可复制的repo？请参阅自述文件中的
注入脚本
信息以了解我在做什么。暂时忽略CRA的东西。我查看了捆绑包的内部，它引用了./node\u模块，我认为这些模块不存在于仅在根目录中创建的文件夹中。还有一件事，为了节省开发时间，我认为您应该使用
html网页包插件
创建
index.html
文件，哪个网页包将向其中注入捆绑包，并利用
webpack服务器
作为您的服务器，该服务器具有实时重新加载功能，可帮助您在更改代码时立即更新应用程序