Webpack 5中CSS Modules配置无效问题排查求助

我尝试在 Webpack 5 中使用 CSS Modules，但配置后完全不生效。按照 ChatGPT 提供的 Webpack 配置步骤操作后，运行 npm start 时控制台报错，CSS Modules 无法正常工作。以下是我的项目目录结构、所有配置文件代码，以及控制台报错内容，麻烦帮忙排查操作中的错误：

项目目录结构 #

my-project/
  |-dist/
      |-index.html
  |- src/
  |   |- index.js
  |   |- styles.css
  |- webpack.config.js
  |- package.json

webpack.config.js 代码 #

const path = require('path');

module.exports = {
  entry: './src/index.js', 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js' 
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader', 
          {
            loader: 'css-loader', 
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
};

src/styles.css 代码 #

/* styles.css */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.title {
  color: blue;
}

src/index.js 代码 #

// index.js
import styles from "./styles.css";

console.log("styles", styles);
document.getElementById("app").innerHTML = `
  <div class="${styles.container}">
    <h1>你好，CSS Modules！</h1>
  </div>
`;

dist/index.html 代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Modules 示例</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

package.json 代码 #

{
  "name": "testbar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config webpack.config.js --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^7.1.1",
    "style-loader": "^4.0.0",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

控制台报错内容 #

1. 核心错误信息：

ERROR in ./src/styles.css 1:0
模块解析失败：意外的令牌 (1:0)
你可能需要合适的加载器来处理该文件类型，目前没有配置任何加载器来处理此文件。请查看 https://webpack.js.org/concepts#loaders
> .container {
|   width: 100%;
|   max-width: 960px;

2. 编译结果：

webpack 5.91.0 编译失败，1个错误，耗时192毫秒

内容的提问来源于stack exchange，提问作者slivername