Create React App 中的 CSS Modules 使用指南

随着前端技术的发展，CSS 逐渐演变为一种更强大、更灵活的语言，CSS Modules 就是其中一项重要技术。它允许您将样式封装在组件内部，从而实现样式的局部化和组件化，避免样式冲突和提高代码的可维护性。

在 Create React App 脚手架中，有两种方法可以集成 CSS Modules：

1. 通过 create-react-app 脚手架

   在项目初始化时，您可以通过 create-react-app 脚手架添加 CSS Modules 的支持。在终端中运行以下命令：

   npx create-react-app my-app --template @snowpack/app-template-react-css-modules
   

   这样，项目将自动使用 CSS Modules。

2. 手动集成 CSS Modules

   如果您已经有一个 Create React App 项目，也可以手动集成 CSS Modules。您需要在 package.json 文件中添加 css-modules-typescript-loader 和 style-loader 包：

   {
     "dependencies": {
       "css-modules-typescript-loader": "^6.0.0",
       "style-loader": "^3.0.0"
     }
   }
   

   然后，在 webpack.config.js 文件中添加以下配置：

   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           "style-loader",
           {
             loader: "css-loader",
             options: {
               modules: true
             }
           }
         ]
       }
     ]
   }
   

   这样，项目也将可以使用 CSS Modules。

使用 CSS Modules 后，您可以在组件的 style.module.css 文件中编写样式，这些样式仅作用于该组件内部，不会影响其他组件。例如：

.button {
  background-color: red;
  color: white;
}

在组件中使用这些样式时，需要使用 className 属性，而不是普通的 class 属性。例如：

import styles from './style.module.css';

const Button = () => {
  return <button className={styles.button}>Click Me</button>;
};

这样，Button 组件的背景颜色就会变成红色，而字体颜色则不会改变，因为普通的 css 样式已经不起作用了。

CSS Modules 还有许多其他特性，比如全局样式、scoped css、CSS-in-JS 等。这些特性可以帮助您编写出更具可维护性和可扩展性的代码。如果您想了解更多关于 CSS Modules 的内容，可以参考官方文档或其他相关资料。