按照webpack5文档加载css文件，打包时报错！

webpack加载css文件，安装style-loader和css-loader，使用webpack打包报错。
1、安装css插件
npm install --save-dev css-loader style-loader
2、查看package.json文件，发现插件已正确安装成功：

3、在webpack.config.js文件中进行css插件配置：

4、在相关js文件中引入css文件：

5、运行yarn run build 进行打包报错，以下是报错信息：

说实话，从配置来看确实好像没什么问题。style-loader和css-loader 如果都安装了的话，配置是没问题的

npm install css-loader style-loader -D 试试，然后node_models检查一下两个依赖是否存在

引用chatgpt：
如果您已经安装了style-loader和css-loader,但是在使用webpack打包时仍然报错，可能是因为您的配置文件中存在一些问题。以下是一些可能导致错误的原因和解决方法：

没有正确配置style-loader和css-loader

确保您已经在webpack配置文件中正确地配置了style-loader和css-loader。例如，在webpack.config.js文件中，您需要添加以下代码：


module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

这将告诉webpack使用style-loader和css-loader来处理CSS文件。请确保您的配置文件中的规则与上面的示例类似。

CSS文件路径不正确

如果您的CSS文件路径不正确，webpack将无法找到它们并加载它们。请确保您的CSS文件路径正确，并且可以在浏览器中访问。如果您的CSS文件位于子目录中，请确保在webpack配置文件中指定正确的路径。例如，如果您的CSS文件位于src/components/MyComponent/styles.css中，则需要在webpack配置文件中添加以下代码：


module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'resolve-url-loader',
            options: {
              force: true, // 如果您的CSS文件路径包含相对路径，则需要添加此选项以强制webpack解析它们为绝对路径。否则，webpack将无法找到这些文件。
            }
          }
        ]
      }
    ]
  }
};

配置没问题去看下 style-loader css-loader 他们的配套版本改下试试

关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：webpack手写loader -----file-loader--给我们的代码添加标识
除此之外, 这篇博客: webpack5 基础配置 loader的认识 css-loader中的 每个rule对象里面又有很多个属性。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
1 test 用来匹配资源，就是匹配到的资源就是这个rule对象要处理的文件。一般是正则表达式
2 use 是一个数组，里面放着又一个个对象，对象里面包含属性
先看图
2.1useEntry对象的属性
2.1.1 loader 用来处理资源的loader
2.1.2 options，可选的属性，值是一个字符串或者对象，值被传入loader中，（后续学习自定义loader用到）
2.1.3 query 目前被options替代了。
现在运行

不会报错。还有简写的方法。
比如
或者

其实都是
这种的简写，后续还是会被转换称这种模式。


1、修改webpack2的使用语法为“-loader”；
2、添加“style-loader”；
3、修改顺序为“style-loader!css-loader;”。