Typescript 4.0 中的 SCSS 接口

Question

我正在尝试通过 Typescript 向我的 React 应用程序公开 SCSS 颜色值，方法是通过 interface 定义它们。这是一个曾经在 Typescript v3 下运行良好的沙箱：https://codesandbox.io/s/cool-night-92rij

升级到 CRA 和 Typescript 4 时它停止工作。知道为什么吗？

Answer 1

发生这种情况是因为您的样式表没有被解析/导入为 css 模块，因此 colors.primary 解析为 undefined。

CRA's naming convention for css modules is [name].module.scss.

如果你只是用这个命名约定重命名你的文件，这样你的 css 模块就可以通过正确的加载器在后台传递，如下所示：https://codesandbox.io/s/funny-margulis-q6nle?file=/src/app/theme/index.ts

import { createMuiTheme } from "@material-ui/core/styles";
import colors from "./colors.module.scss";

export const theme = createMuiTheme({
  palette: {
    background: {
      default: colors.background
    },
    primary: {
      main: colors.primary
    }
  }
});

TLDR：重命名文件：

colors.scss      -> colors.module.scss
colors.scss.d.ts -> colors.module.scss.d.ts