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

typescript

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

在使用 Create React App（CRA）创建 typescript 项目时，我们通常需要手动为 CSS 模块编写类型定义，以确保在代码中正确地引用和使用 CSS 类名。然而，手动编写这些类型定义既繁琐又容易出错。幸运的是，我们可以利用一些工具来自动生成这些类型定义，从而节省时间和精力。

本文将介绍如何在 Create React App + typescript 项目中使用 CSS 模块，并通过工具自动生成类型定义，无需从 CRA 中弹出。

为什么使用 CSS 模块

在传统的前端开发中，我们通常使用全局 CSS 样式来定义页面的样式。然而，全局 CSS 容易造成样式冲突和命名空间污染，导致维护困难。CSS 模块是一种解决这个问题的方式，它将 CSS 样式作用域限定在组件内部，避免了全局污染的问题。

使用 CSS 模块可以让我们在组件内部定义样式，并使用独特的类名来确保样式不会与其他组件发生冲突。这样一来，即使我们在不同的组件中使用了相同的类名，它们也不会相互干扰。

在 Create React App 中使用 CSS 模块

Create React App 提供了对 CSS 模块的内置支持。我们可以在项目中的 CSS 文件中使用:local关键字来定义局部样式，并使用:global关键字来定义全局样式。

首先，我们需要在项目中的 CSS 文件中使用:local关键字来定义局部样式。例如，我们可以创建一个名为styles.CSS的文件，并在其中定义一些局部样式：

CSS
/* styles.CSS */
.myClass {
  color: red;
}
.myOtherClass {
  color: blue;
}

然后，我们可以在组件中引入这些样式，并使用生成的类名来应用样式：

tsx
// MyComponent.tsx
import React from 'react';
import styles from './styles.CSS';
const MyComponent: React.FC = () => {
  return (
    <div>
      
<img src="https://img.izhida.com/topic/2c56c360580420d293172f42d85dfbed.jpg" alt="CSS"><br>CSS
Hello, world!
      
This is a CSS module example.
    </div>
  );
};
export default MyComponent;

这样，我们就可以在组件中使用 CSS 模块，并确保样式的作用域被限定在组件内部。

自动生成类型定义

在使用 CSS 模块时，一个常见的问题是如何为 CSS 类名生成类型定义。手动编写这些类型定义非常繁琐，而且容易出错。幸运的是，我们可以使用一些工具来自动生成这些类型定义，以提高开发效率。

一种常用的工具是typings-for-CSS-modules-loader，它可以在构建过程中自动生成 CSS 模块的类型定义。我们可以通过以下步骤来使用这个工具：

1. 首先，安装typings-for-CSS-modules-loader作为开发依赖：

bash
npm install --save-dev typings-for-CSS-modules-loader

2. 将项目中的 CSS 文件的后缀名更改为.module.CSS，以告诉 webpack 使用 CSS 模块加载器。例如，将styles.CSS改为styles.module.CSS。

3. 在项目的webpack.config.JS中添加以下配置，以使用typings-for-CSS-modules-loader来自动生成类型定义：

Javascript
// webpack.config.JS
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.module\.CSS$/,
        use: [
          'style-loader',
          {
            loader: 'typings-for-CSS-modules-loader',
            options: {
              modules: true,
              namedExport: true,
              camelCase: true,
              sass: false,
            },
          },
        ],
      },
      // ...
    ],
  },
  // ...
};

这样，每次构建项目时，typings-for-CSS-modules-loader都会自动为.module.CSS文件生成相应的类型定义，无需手动编写。

在本文中，我们介绍了如何在 Create React App + typescript 项目中使用 CSS 模块，并通过工具自动生成类型定义。使用 CSS 模块可以避免全局样式冲突和命名空间污染的问题，使样式的作用域被限定在组件内部。通过使用typings-for-CSS-modules-loader工具，我们可以自动为 CSS 模块生成类型定义，无需手动编写。这大大提高了开发效率，减少了出错的可能性。

希望本文对你在使用 Create React App + typescript + CSS 模块时有所帮助！