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来解决此问题；它会自动为您生成这些*.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-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扩展名即可。

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

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

打开任何TypeScript文件。
单击VS Code底部蓝色状态栏上的版本号。
选择“使用工作区版本”（在撰写本文时为3.7.3）。

下面是一个截图，可以使您更加清楚：

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

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

Answer 2

好吧，一切都是正确的，正如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",
     ...
  ]

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

2 个答案: