为什么在编译我的 SASS 模块时得到 "Module parse failed"？

Question

我每次运行我的 CRA 应用程序时都会收到以下错误，尽管一切运行都是正确的：

Compiling...
Files successfully emitted, waiting for typecheck results...
Compiled with warnings.

./src/app/theme/colors.module.scss.d.ts 4:12
Module parse failed: Unexpected token (4:12)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| $RefreshSetup$(module.id);
| 
> const colors;
| export default colors;
|

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

这是罪魁祸首文件：

export interface AppColors {
    background: string;
    primary: string;
    secondary: string;
}

const colors: AppColors;

export default colors;

它让我可以re-use my SCSS/SASS variables in my Typescript files。

怎么了？

Answer 1

尝试将文件内容替换为：

声明模块'AppColors'{ 导出界面 AppColors { 背景：字符串；初级：字符串；二级：字符串； } 导出 = AppColors }

您不能在 d.ts 文件中定义变量

（抱歉没有格式化代码 - 从单元格写入）

Answer 2

最后只好更换

const colors: AppColors;

和

declare const colors: AppColors;

为什么在编译我的 SASS 模块时得到 "Module parse failed"？

Why do I get a "Module parse failed" when compiling my SASS module?

webpack

create-react-app

dart-sass