ESModule本身不支持样式文件导入，但通过Vite、Webpack等构建工具可实现CSS模块化：支持import './style.css'注入样式，配合CSS Modules（.module.css）实现类名局部化，或用JS动态生成样式，需规避非ESM的CSS import及重复注入等问题。
ESModule（ESM）本身不直接支持样式文件（如 CSS、SCSS）的模块化导入和依赖管理，因为浏览器原生 ESM 只能解析 JavaScript 模块。但通过构建工具链配合标准 ESM 语法，可以在组件化开发中实现样式文件的“逻辑依赖”与“作用域隔离”，让样式像 JS 模块一样按需加载、避免全局污染。
用 ESM 导入样式文件（需构建工具支持）
虽然 import './Button.css' 在纯浏览器环境中会报错（“Not a valid JavaScript module”），但在 Vite、Webpack（5+）、Rollup 等现代构建工具中，这种写法被合法支持——它们将 CSS 文件视为“资源模块”，并在编译时将其内容注入 DOM 或提取为独立文件。
- Vite 默认支持
import './index.css'，会自动注入<style>标签，并启用 HMR - Webpack 需配置
css-loader+style-loader（或mini-css-extract-plugin）才能解析 CSS import - 注意：该导入是“副作用导入”，不导出值，因此常用
import './Component.module.css'形式
用 CSS Modules 实现组件级样式封装
ESM 的静态分析能力可与 CSS Modules 结合，让类名自动局部化，避免命名冲突，真正体现“组件样式即依赖”：
- 命名约定：使用
.module.css（如Button.module.css） - 在组件中 ESM 导入：
import styles from './Button.module.css' - JSX 中通过
className={styles.root}使用，构建工具会将root编译为唯一哈希类名（如Button_root__abc123） - 这样样式就和组件 JS 模块形成强绑定关系：删除组件文件，样式自动失效；复用组件，样式随模块一起被解析
用 JS 动态生成/注入样式（高级可控方案）
对于需要运行时控制的场景（如主题切换、动态主题变量），可借助 ESM 的导出能力，把样式逻辑写成 JS 模块：
立即学习“Java免费学习笔记（深入）”；
- 创建
theme.js：导出颜色、间距等设计 token - 创建
generateCSS.js：接收 token，返回字符串格式的 CSS（含:root变量或关键选择器） - 组件中
import { generateCSS } from './generateCSS.js'，并在useEffect或生命周期中注入<style>标签 - 此时样式不再是静态资源，而是由 JS 模块“声明式依赖”并参与打包、HMR 和 tree-shaking
避免常见陷阱
ESM 管理样式依赖不是开箱即用，需明确边界：
-
不要在 .css 文件里用
import引其他 CSS（这是预处理器语法，非 ESM；应统一用 SCSS/Less 的@import或构建插件处理） - 全局样式（如 reset.css）适合用入口文件一次性导入，而非每个组件重复 import，否则易导致重复注入
-
SSR 场景下，CSS 注入需服务端收集 + 客户端 hydrate，Vite/Next.js/Nuxt 已内置支持，勿手动操作
document.head -
tree-shaking 对 CSS 无效，但 CSS Modules + 构建工具可剔除未使用的类（需开启 purge 功能，如 Tailwind 的
content配置）
