Vue 转 React：揭秘 CSS Modules 是如何被 VuReact 编译的？

VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue SFC 中的<style module>CSS Modules 样式经过 VuReact 编译后会变成什么样的 React 代码？

前置约定

为避免示例代码冗余导致理解偏差，先明确两个小约定：

1. 文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
2. 默认读者已熟悉 Vue 3 中 CSS Modules 的用法。

编译对照

模块样式转换

Vue 的 CSS Modules 会转换为 React 兼容的模块导入形式，保持类名映射的完整性。

• Vue 代码：

<!-- Component.vue --><template><div:class="$style.container">Hello</div></template><stylemodule>.container{padding:20px;background:#f5f5f5;}</style>

• VuReact 编译后 React 代码：

// Component.jsximport$stylefrom'./component-abc1234.module.css';functionComponent(){return<div className={$style.container}>Hello</div>;}

/* component-abc1234.module.css */.container{padding:20px;background:#f5f5f5;}

从示例可以看到：Vue 的<style module>块被编译为 CSS Modules 文件，并在 React 组件中通过模块导入方式使用。VuReact 提供的CSS Modules 转换功能，可理解为「React 版的 Vue CSS Modules」，完全模拟 Vue SFC 的模块样式映射机制，例如通过$style.container访问编译后的类名，确保样式模块化的完整性。

模块名映射

CSS Modules 支持不同的模块名映射方式：

1. 默认模块名：$style→$style
2. 自定义模块名：<style module="custom">→custom

自定义模块名示例：

• Vue 代码：

<!-- Component.vue --><template><div:class="custom.container">Custom Module</div></template><stylemodule="custom">.container{margin:10px;border:1px solid #ccc;}</style>

• VuReact 编译后 React 代码：

// Component.jsximportcustomfrom'./component-xyz123.module.css';functionComponent(){return<div className={custom.container}>Custom Module</div>;}

模块名映射特点：

1. 灵活性：支持自定义模块名，适应不同项目需求
2. 一致性：保持 Vue 和 React 端的模块名一致
3. 导入方式：使用 ES6 模块导入语法
4. 类型安全：TypeScript 环境下有完整的类型提示

带 Scoped 的 CSS Modules

CSS Modules 可以与 Scoped 样式结合使用，提供更强的样式隔离。

• Vue 代码：

<!-- Component.vue --><template><div:class="$style.wrapper"><span:class="$style.text">Text Content</span></div></template><stylemodulescoped>.wrapper{padding:20px;background:#f8f8f8;}.text{color:#333;font-size:16px;}</style>

• VuReact 编译后 React 代码：

// Component.jsximport$stylefrom'./component-abc123.module.css';functionComponent(){return(<div className={$style.wrapper}data-css-abc123><span className={$style.text}data-css-abc123>Text Content</span></div>);}

/* component-abc123.module.css */.wrapper[data-css-abc123]{padding:20px;background:#f8f8f8;}.text[data-css-abc123]{color:#333;font-size:16px;}

Scoped + Module 组合优势：

1. 双重隔离：模块化 + 作用域双重样式隔离
2. 类名安全：避免类名冲突
3. 开发体验：清晰的类名引用方式
4. 维护性：易于维护和重构

编译策略总结

VuReact 的 CSS Modules 编译策略展示了完整的模块化样式转换能力：

1. 模块提取：将 Vue 的 CSS Modules 提取为独立的.module.css文件
2. 类名映射：保持类名映射关系，支持$style.className语法
3. 模块导入：转换为 React 兼容的模块导入方式

VuReact 的编译策略确保了从 Vue 到 React 的平滑迁移，开发者无需手动处理 CSS Modules 的兼容性问题。编译后的代码既保持了 Vue 的 CSS Modules 使用体验，又符合 React 的模块化设计模式，让迁移后的应用保持完整的样式模块化能力。

🔗 相关资源

• VuReact 官方文档：语义编译对照总览
• Github：https://github.com/vureact-js/core

📖 继续阅读

• 上一篇：scoped 作用域样式
• 下一篇：样式语言支持

✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！