在 Webpack 和 Typescript 中使用 CSS 模块

我正在尝试将 CSS 模块集成到我的项目中，该项目使用 Typescript 和 Next JS。这是我到目前为止的设置：

   module.exports = withCustomBabelConfigFile(
      withTypeScript(withCSS({ 
      cssModules: true,
        babelConfigFile: path.resolve("./babel.config.js"),
        webpack(config, options) {
          config.module.rules.push({
            test: /\.css$/,
            include: path.join(__dirname, 'pages/index.tsx'),
            use: [
              'style-loader',
              {
                loader: 'typings-for-css-modules-loader',
                options: {
                  modules: true,
                  namedExport: true,
                  camelCase: true
                }

              }
            ],
          })
          return config
        }
      }))
    );

我正在尝试使用 typings-for-css-modules-loader 插件，让 Webpack 自动为我的 CSS 生成 TS 类型定义。

如果我从配置中移除 withCSS() 函数，类型定义会生成，但 CSS 模块不起作用，因为没有 CSS 被添加到元素上。然而，如果我在配置中保留 withCSS()，类型定义不会生成，但 CSS 模块会正常工作。

有人以前在这种情况下使用过 Next JS 配置，或者知道我做错了什么吗？

谢谢！