在Next JS中将sass模块与Typescript一起使用

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)

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