在 Next JS 中使用带有 Typescript 的 sass 模块

Question

我正在尝试在 Next JS 中编辑默认的 Webpack 配置，以便我的 sass 文件能够使用 CSS 模块，同时还让编译过程输出我的声明文件，以便我的 sass 与 Typescript 一起使用。

我已经看到很多使用普通 css 的例子，但不能让它与 Typescript 一起工作。

这是我的 next.config.js 的当前设置：

module.exports = withCustomBabelConfigFile(
  withTypeScript(withSass({
    cssModules: true,
    babelConfigFile: path.resolve("./babel.config.js"),
    webpack(config, options) {
      config.module.rules.push(
        {
          test: /\.scss$/,
          use: [
            "style-loader",
            {
              loader: "typings-for-css-modules-loader",
              options: {modules: true,nameExport: true,camelCase: true,sass: true}
            },
            "sass-loader"
          ]

        }
      );
      return config
    }
  }))
);

在typings-for-css-modules-loader我认为是实现TS声明文件输出的关键，但我不断收到以下错误：

./pages/home/index.scss $font-size: 50px; ^ Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi" in /Users/sites/project/pages/home/index.scss (line 1, column 1)

任何帮助将不胜感激，谢谢！