Create-react-app + TypeScript + CSS 模塊：自動生成類型定義而不從 CRA 中彈出

Question

問題

create-react-app v2+ 支持開箱即用的 TypeScript 和 CSS 模塊......分別。 當您嘗試將兩者一起使用時，問題就出現了。 Facebook 對這個問題進行了廣泛的討論，並最終在 GitHub 上將其關閉。因此開發人員必須使用 hack 和其他變通方法來使這兩種技術與 CRA 一起很好地協同工作。

現有的解決方法：

您可以使用如下類型定義手動創建ComponentName.module.css.d.ts文件： export const identifierName: string 。 這允許您在 go 導入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

好的，所以我最終確實弄清楚了這一點，並為遇到類似問題的任何人寫了一篇關於該主題的博客文章：

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" }]
  }
}

接下來，在 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. Select 使用工作區版本（撰寫本文時為 3.7.3）。

這是一個屏幕截圖，可以更清楚地說明：

一旦你這樣做了，VS Code 將在你的項目中創建一個 .vscode 目錄用於工作區設置。

此時，您已准備好將 CSS 模塊與 TypeScript 一起使用。

Answer 2

2022 年更新

注意：如果您使用的是 react-scripts@2.1.x 或更高版本，則不需要使用自定義定義，例如

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

自定義定義

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

您還可以將此 VS 代碼設置添加到本地 JSON 設置文件中：

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

這將確保 VS Code 將使用項目版本 Typescript 而不是 VS Code 版本，如果您還沒有這樣做，將會提示您這樣做。

Answer 3

好吧，正如 AlexH 所說，一切都是正確的。 tsconfig.ts 中的 1 個。

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

2 在 global.d.ts

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

3.但同樣在 tsconfig 你應該完成

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