css module的用法

CSS Modules是一种CSS预处理器技术，主要用于解决大型单页应用（SPA）中命名冲突的问题，特别是在使用组件化开发模式下。它的核心思想是在模块内部创建唯一的类名，通过`@module`规则将样式限定在特定范围。以下是CSS Modules的基本用法：

1. **安装**：在项目中安装`postcss-modules`插件，例如使用npm或yarn：

   npm install postcss-postcss-modules autoprefixer
   # 或者
   yarn add postcss postcss-modules autoprefixer

2. **配置**：在构建工具（如Webpack、Rollup等）的配置文件中设置CSS Modules选项。

3. **编写模块化的CSS**：在`.module.css`文件中，选择器会自动添加一个由文件名和哈希组成的唯一前缀。例如：

   .MyComponent {
     color: red;
   }

这里`.MyComponent`会被转换为`-[hash]-MyComponent`这样的唯一类名。

4. **引用模块**：在组件的HTML中，引用这个模块就像引用普通的CSS一样，但是需要导入：

   <div className={require('./MyComponent.module.css')}>Hello World</div>

5. **导出和复用**：如果想在其他地方复用一个模块的样式，可以将其导出并引入到其他`.module.css`文件：

   // MySharedStyles.module.css
   export { colors } from './colors.module.css';
   
   // 使用
   import { colors } from './MySharedStyles.module.css';
   .MyOtherComponent {
     background-color: ${colors.primary};
   }