preact官方不内置css模块化支持，必须依赖webpack/vite等构建工具链的loader（如css-loader）实现；babel仅处理js语法，无法解析或模块化css文件。
直接说结论：Preact 官方不内置 CSS 模块化支持，必须靠构建工具链（如 Webpack/Vite）或 Babel 插件配合 loader 实现；但 @babel/plugin-transform-imports 或 @babel/plugin-syntax-dynamic-import 本身不处理 CSS，Babel 无法直接“解析”或“模块化” CSS 文件——这是 loader 层的事。
为什么 Babel 插件不能单独实现 CSS 模块化引入
Babel 只负责转换 JavaScript 语法（比如 JSX、TS、新 API），它不读取、不解析、不重写 .css 文件内容。所谓“CSS 模块化引入”，本质是：
- 在 JS 中写
import styles from './Button.module.css'—— 这行代码能通过 Babel（因为只是合法 import 语法） - 但真正把
Button.module.css编译成带哈希的局部类名对象，并注入到styles变量里，靠的是css-loader（Webpack）或 Vite 的原生 CSS Modules 处理逻辑 - 如果你强行用 Babel 插件去“模拟”这个行为（比如重写 import 路径、注入 mock 对象），会导致热更新失效、SourceMap 错乱、HMR 不工作，且无法生成真实样式
在 Preact + Webpack 项目中启用 CSS Modules 的正确路径
Preact 项目通常基于 preact-cli 或自建 Webpack，CSS Modules 必须由 loader 配置驱动，Babel 只需保持默认即可。关键点如下：
- 确保 CSS 文件名符合约定：
Component.module.css（不是Component.css）——这是 Webpackcss-loader启用 modules 模式的默认触发条件 - Webpack 规则中显式启用 modules（推荐使用对象形式，避免旧字符串写法）：
{ test: /\.module\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: { localIdentName: '[name]__[local]__[hash:base64:5]' } } } ] } - 非模块化 CSS（如全局 reset、第三方库样式）仍用
/.css$/规则，且modules: false（或不配 modules 字段） - Babel 配置（
babel.config.js）无需任何插件来“支持 CSS 引入”，只要保留@babel/preset-react和@babel/preset-env即可
如果坚持用 Babel 插件“绕过 loader”会踩什么坑
有人尝试用 @babel/plugin-transform-imports 把 import './foo.module.css' 改写成 import './foo.module.css?modules'，以为能触发 Webpack 处理——但实际无效，因为：
- Webpack 的 rule
test匹配的是文件路径后缀，不是 query 参数；.css?modules不匹配/\.module\.css$/ - 即使改写成
./foo.module.css，若 Webpack 没配对应 rule，最终报错Cannot find module './foo.module.css' - 更危险的是：某些 Babel 插件（如
babel-plugin-css-modules-transform）会在构建时静态生成类名映射，但完全脱离 CSS 实际内容，导致样式漏编译、伪类/媒体查询丢失、@import 无效
Preact + Vite 用户更简单：不用动 Babel
Vite 对 CSS Modules 是开箱即用的，只要文件名含 .module.（如 Button.module.css），Vite 就自动启用模块化，无需任何 Babel 插件或 Webpack 配置：
- JS 中照常写
import styles from './Button.module.css' - Vite 在 dev 时注入 HMR-ready 的模块对象，build 时自动哈希类名
- Babel 根本不参与这个流程——Vite 用 esbuild 或 postcss 处理 CSS，和 Babel 无关
- 若你用了
@preact/preset-vite，它已预设好该行为，无需额外操作
真正容易被忽略的是：CSS Modules 的作用域只在 JS 模块内生效，styles 对象里没有定义的类（比如你在组件里手写了 className="missing"），哪怕 CSS 文件里真有 .missing，也不会被注入——它被 loader 当作“未引用”给 tree-shaked 了。调试时别只盯着文件名和 import 语句，要确认 loader 真正命中并处理了那个文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
