Create-react-app + TypeScript + CSS 模块：自动生成类型定义而不从 CRA 中弹出

Question

问题

create-react-app v2+ 支持开箱即用的 TypeScript 和 CSS 模块......分别。当您尝试将两者结合使用时，就会出现问题。 Facebook had an extensive discussion 关于这个问题并最终在 GitHub 上将其关闭。因此，开发人员必须使用 hack 和其他变通方法来让这两种技术与 CRA 一起很好地发挥作用。

现有解决方法：

您可以手动创建具有如下类型定义的ComponentName.module.css.d.ts 文件：export const identifierName: string。这允许您在导入 ComponentName.module.css 时利用 TypeScript 的键入和 VS Code 的自动完成功能。不幸的是，这非常乏味。

解决方案 (?)：

Dropbox 的人们创建了typed-css-modules-webpack-plugin 来解决这个问题；它会为您自动生成那些*.d.ts 文件。他们展示了如何使用yarn 或npm 安装它，然后给出这个最小的代码示例：

const path = require('path');
const {TypedCssModulesPlugin} = require('typed-css-modules-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          // Use CSS Modules
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  // Generate typing declarations for all CSS files under `src/` directory.
  plugins: [
    new TypedCssModulesPlugin({
      globPattern: 'src/**/*.css',
    }),
  ],
};

不幸的是，目前尚不清楚如何将其与create-react-app 一起使用。我对 Webpack 不是很了解，我使用customize-cra 来避免退出create-react-app，所以我可以为我需要的一些东西自定义 Webpack 配置。例如，Ant Design 允许您使用 babel-plugin-import 按需导入组件，详情如下：

https://ant.design/docs/react/use-in-typescript#Use-babel-plugin-import

问题：如何将上述 Webpack 配置代码转换为 customize-cra 等效项，这样我就不必退出 CRA？

Answer 1

好吧，正如 AlexH 所说，一切都是正确的。 tsconfig.ts 中的 1 个。

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

global.d.ts 中的 2 个

declare module '*.module.less' {
  const classes: { [key: string]: string };
  export default classes;
}

1. 但你也应该在 tsconfig 中写

 "include": [
    "global.d.ts",
     ...
  ]

Answer 2

好的，所以我最终弄清楚了这一点，并为遇到类似问题的任何人写了一篇关于该主题的博客文章：

https://aleksandrhovhannisyan.github.io/blog/dev/how-to-set-up-react-typescript-ant-design-less-css-modules-and-eslint/#3-create-react-app-css-modules-and-typescript-

该解决方案使用typescript-plugin-css-modules 插件。以下是我博客文章中的相关内容：

yarn add -D typescript-plugin-css-modules

安装后，将插件添加到您的 tsconfig.json 中：

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

接下来，在您的 src 目录下创建一个名为 global.d.ts 的文件。顺便说一句，您不必将其命名为 global；您可以随意命名文件，只要它具有.d.ts 扩展名。输入这些内容：

declare module '*.module.less' {
  const classes: { [key: string]: string };
  export default classes;
}

如果您还想使用 SASS 或 CSS，只需添加更多模块声明并更改 .less 扩展名。

我们快完成了！根据插件的使用说明，如果您希望智能感知在 VS Code 中工作，您需要强制 VS Code 使用您的工作区版本的 TypeScript，而不是全局安装的版本。还记得我们一开始通过 CRA 安装 TypeScript 的时候吗？这是我们的 TypeScript 工作区版本。

下面是如何在 VS Code 中使用工作区版本的 TypeScript：

1. 打开任何 TypeScript 文件。

2. 点击VS Code底部蓝色状态栏的版本号。

3. 选择使用工作区版本（撰写本文时为 3.7.3）。

这里有一个屏幕截图可以更清楚地说明：

完成此操作后，VS Code 将在您的项目中创建一个 .vscode 目录用于工作区设置。

此时，您已准备好将 CSS 模块与 TypeScript 一起使用。