微前端常用技术介绍：CSS Module

一、CSS Module 核心原理

CSS Module 是一种将 CSS 样式封装为模块的开发模式，通过编译时映射机制实现局部作用域，彻底解决传统 CSS 的全局样式污染问题。其工作原理可概括为：

1. 编译时类名转换

CSS Module 文件在构建过程中会被编译为两部分：

CSS 文件 ：所有类名被转换为唯一哈希值（如 .button__primary___3b532）
映射对象 ：生成原始类名到哈希值的映射（如 { primary: 'button__primary___3b532' }）

2. JavaScript 集成机制

通过导入 CSS 文件，可获取样式映射对象，在 JS 中引用局部类名：

javascript 复制代码

import styles from './button.css';
// 使用 styles.primary 引用 .primary 类
<button className={styles.primary}>按钮</button>

3. 局部与全局作用域

默认局部：所有类名默认仅在当前模块有效
显式全局 ：使用 :global 语法声明全局类
混合使用：可在同一文件中同时定义局部和全局样式

二、各平台支持与配置指南

1. 主流构建工具配置

Webpack

css 复制代码

// webpack.config.js
{
  test: /.module.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  ]
}

Vite

arduino 复制代码

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase'
    }
  }
}

Parcel

perl 复制代码

// .parcelrc
{
  "transformers": {
    "*.module.css": ["@parcel/transformer-css", "@parcel/transformer-postcss"]
  }
}

2. 框架集成方案

React (Create React App)

内置支持，使用 .module.css 后缀文件即可

Next.js

默认支持 CSS Module，自动处理 .module.css 文件

Vue.js

css 复制代码

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          localIdentName: '[name]_[local]_[hash:base64:5]'
        }
      }
    }
  }
}

Angular

json 复制代码

// angular.json
{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/styles"]
            },
            "cssTransform": "css-modules"
          }
        }
      }
    }
  }
}

三、CSS Module 规则与应用实践

1. 类名定义与使用

基础用法

css 复制代码

/* button.module.css */
.primary {
  background-color: blue;
  color: white;
}

javascript 复制代码

import styles from './button.module.css';
<button className={styles.primary}>主按钮</button>

多样式文件引入

javascript 复制代码

import styles from './button.module.css';
import text from './text.module.css';
<button className={[styles.primary, text.color]}>主按钮</button>

全局类

css 复制代码

:global(.btn-danger) {
  background-color: red;
}

ini 复制代码

<button className="btn-danger">危险按钮</button>

2. 样式组合机制

通过 composes 关键字复用其他模块的样式：

css 复制代码

/* base.module.css */
.baseButton {
  padding: 8px 16px;
  border-radius: 4px;
}

/* button.module.css */
.primary {
  composes: baseButton from './base.module.css';
  background-color: blue;
}

3. 变量

官方文档中介绍了使用 postcss-modules-values 插件支持变量，不过使用 css variable 更方便，兼容性也不差。

less 复制代码

/* colors.css */
@value primary: #0c77f8;
@value secondary: #f60;

/* button.css */
@value colors: "./colors.css";
@value primary, secondary from colors;

.button {
  background-color: primary;
  &:hover {
    background-color: secondary;
  }
}

4. 伪类与嵌套

css module 支持伪类及内部嵌套。

css 复制代码

.link {
  color: #333;
  &:hover {
    color: #f60;
  }
  &.active {
    font-weight: bold;
  }
}

bash 复制代码

<a href="#" className={[styles.link, isActive && styles.active].join(' ')}>链接</a>

5. 动态类名

通过条件判断动态应用类名：

less 复制代码

<button className={[  styles.button,  isLoading ? styles.loading : '',  isDisabled ? styles.disabled : ''].join(' ')}>
  提交
</button>

四、CSS Module 在微前端中的应用

1. 核心优势

样式隔离：各子应用样式自动局部化，彻底避免冲突
独立部署：子应用可独立开发，无需担心全局样式污染
主题统一：通过 CSS Variables 和主题机制实现全局风格一致
渐进迁移：可逐步引入，兼容现有 CSS 代码

2. 微前端适配方案

类名前缀策略

css 复制代码

// webpack.config.js
{
  test: /.module.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[app-name]__[local]___[hash:base64:5]'
        }
      }
    }
  ]
}

主题管理

css 复制代码

/* theme.css */
:root {
  --primary-color: #165DFF;
  --secondary-color: #FF7D00;
}

/* app1.module.css */
.container {
  background-color: var(--primary-color);
}

3. 优缺点总结

优点：

天然样式隔离，适合微前端多应用共存环境
与组件强绑定，提高代码可维护性
支持渐进式迁移，降低重构成本
生态成熟，主流构建工具和框架均提供支持

缺点：

动态样式支持有限，复杂场景需结合 JS 逻辑
调试时类名不直观，需依赖 Source Map
多应用共享样式时需额外配置，避免重复打包

五、CSS Module 与其他方案对比

方案	作用域控制	动态样式	学习成本	性能影响
CSS Modules	编译时局部	有限支持	中等	较小
CSS-in-JS	运行时局部	完全支持	高	中等
Shadow DOM	浏览器原生	有限支持	低	较大
Tailwind CSS	全局工具类	完全支持	中等	较小

六、最佳实践与建议

命名约定：使用 camelCase 命名类名，方便 JS 引用
样式复用 ：通过 composes 和 CSS Variables 实现样式复用
调试优化 ：开发环境使用 [name]__[local] 格式类名，生产环境使用哈希
混合使用：复杂动态样式场景可结合 CSS-in-JS 方案
性能优化：通过 Tree Shaking 和代码分割减少 CSS 体积