Typescript 4.0 中的 SCSS 接口

Question

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

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

Answer 1

发生这种情况是因为您的样式表未 parsed/imported 作为 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

Typescript 4.0 中的 SCSS 接口

SCSS Interfaces in Typescript 4.0

reactjs

typescript

sass

typescript4.0