为什么在编译 SASS 模块时会出现“模块解析失败”？

如何解决为什么在编译 SASS 模块时会出现“模块解析失败”？

我每次运行 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。

怎么了？

解决方法

尝试将文件内容替换为：

声明模块'AppColors'{ 导出接口 AppColors { 背景：字符串； 主要：字符串； 次要：字符串； } 导出 = AppColors }

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

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

,

最后只好换了

const colors: AppColors;

与

declare const colors: AppColors;