Create-react-app + TypeScript + CSS 模块：无需从 CRA 弹出即可自动生成类型定义

Question

问题

create-react-appv2+ 支持开箱即用的 TypeScript 和 CSS 模块......分别。当您尝试将两者结合使用时，就会出现问题。Facebook对这个问题进行了广泛的讨论，最终在 GitHub 上将其关闭。因此，开发人员必须使用 hacks 和其他变通方法来让这两种技术与 CRA 一起很好地发挥作用。

现有的解决方法：

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

解决方案（？）：

Dropbox 的人就是typed-css-modules-webpack-plugin为了解决这个问题而创建的；它会*.d.ts为您自动生成这些文件。他们展示了如何使用yarnor安装它，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

好的，所以我最终确实解决了这个问题，并且我为遇到类似问题的任何人写了一篇关于该主题的博客文章：

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

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

yarn add -D typescript-plugin-css-modules

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

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

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

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

如果您还想使用 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 结合使用。

Answer 2

2022 年更新

\n

注意：如果您使用的是react-scripts@2.1.x或更高版本，则不需要使用自定义定义，如果您使用的是typescript-plugin-css-modules，例如

\n

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

\n

\n

自定义定义

\n

注意：如果您使用的是react-scripts@2.1.x 或更高版本，创建React App 用户可以跳过此部分。

\n

\n

您还可以将此 VS code 设置添加到本地 JSON 设置文件中：

\n

{\n  "typescript.tsdk": "node_modules/typescript/lib",\n  "typescript.enablePromptUseWorkspaceTsdk": true\n}\n

\n

这将确保 VS Code 将使用 Typescript 的项目\xe2\x80\x99s 版本而不是 VS Code 版本，并且如果您已经是\xe2\x80\x99t，则会提示您这样做。

\n