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

Question

问题

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

现有解决方法：

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

解决方案（？）：

Dropbox的同事创建了typed-css-modules-webpack-plugin以解决此问题；它会自动为您生成这些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',
    }),
  ],
};

中使用它。我对Webpack不太了解，并且我正在使用create-react-app以避免弹出customize-cra，因此我可以为我需要的一些东西自定义Webpack配置。例如，Ant Design允许您使用create-react-app按需导入组件，如下所示：

babel-plugin-import

问题：如何将上面的Webpack配置代码转换为等效的https://ant.design/docs/react/use-in-typescript#Use-babel-plugin-import，这样我就不必退出CRA了？

Answer 1

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

customize-cra

该解决方案使用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

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

typescript-plugin-css-modules

接下来，在src目录下创建一个名为yarn add -D typescript-plugin-css-modules的文件。顺便说一下，您不必命名为

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

；您可以将文件命名为任意名称，只要文件扩展名为global.d.ts即可。输入这些内容：

global

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

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

这里是在VS Code中使用TypeScript工作区版本的方法：

1. 打开任何TypeScript文件。

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

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

以下是屏幕截图，可以使内容更加清晰：

.d.ts

一旦完成，VS Code将在项目中为工作区设置创建一个.vscode目录。

至此，您都准备将CSS模块与TypeScript一起使用。