Javascript 网页包CSS模块错误如何正确加载CSS

嘿，伙计们，我正在尝试使用带有CSS加载器的Webpack运行此项目，但我一直遇到以下错误：

ERROR in ./src/component/list-view/list-view.css 1:3
Module parse failed: Unexpected token (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> h2 {
|     color: #ff0000;
| }

这是一个简单的JS项目。我的网页包配置如下所示：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const NodemonPlugin = require('nodemon-webpack-plugin');
require('file-loader')

module.exports = {
  mode: process.env.NODE_ENV || 'production',
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: ['file-loader'],
      },
      {
        test: /\.css$/i,
        use: ["style-loader"],
      }
    ],
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new NodemonPlugin()
  ]
};

---

看起来您错过了

css加载程序

，这是处理

css

文件的关键。仅使用

样式加载器

是不够的，因为

样式加载器

将向文档注入css

因此，安装并添加到配置文件：

//安装
//npm i-D css加载器
//将其添加到当前css规则中
{
测试：/\.css$/i，
使用：[“样式加载器”、“css加载器”]，
}