CSS模块化样式技能 css-modules

CSS Modules 是一种用于实现 CSS 样式作用域化和模块化的技术。本技能提供 CSS Modules 的配置、编写、组合、变量使用和主题化处理的专家指导。它帮助前端开发者在 React 等现代框架中管理组件样式，避免样式冲突，构建可维护的设计系统。关键词：CSS Modules，作用域样式，模块化CSS，React样式，前端开发，组件样式，CSS变量，主题化。

前端开发 0 次安装 0 次浏览更新于 2/26/2026

name: css-modules description: CSS Modules 模式、组合、变量和构建配置。 allowed-tools: Read, Write, Edit, Bash, Glob, Grep

CSS Modules 技能

提供 CSS Modules 作用域样式方面的专家协助。

能力

配置 CSS Modules
编写作用域样式
实现样式组合
使用 CSS 变量
处理主题化

使用模式

/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  composes: reset from './reset.module.css';
}

.primary {
  composes: button;
  background: var(--color-primary);
  color: white;
}

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

<button className={styles.primary}>点击我</button>

目标流程

react-应用开发
组件样式
设计系统