Typescript 4.0中的SCSS接口

问题描述

我试图通过min_id_param = sys.argv[1] max_id_param = sys.argv[2] sql_datastore_name = sys.argv[3] query = """ SELECT id,foo,bar FROM baz WHERE baz.id BETWEEN {} AND {} """.format(min_id_param,max_id_param) run = Run.get_context() sql_datastore = Datastore.get(run.experiment.workspace,sql_datastore_name) dataset = Dataset.Tabular.from_sql_query((sql_datastore,query)) 定义SCSS颜色值到Typescript给我的React应用程序。这是一个曾经在Typescript v3下运作良好的沙箱：https://codesandbox.io/s/cool-night-92rij

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

解决方法

之所以发生这种情况，是因为您的样式表没有被解析/导入为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