Expo 49项目中React Native使用CSS Modules报错：无法解析App.module.css

核心原因 #

Expo 49默认不支持CSS Modules语法，直接导入.module.css文件会触发路径解析错误，需要额外配置babel插件来支持。

具体解决步骤 #

1. 安装依赖插件
   在项目根目录执行命令安装babel插件：

   npm install babel-plugin-react-native-css-modules --save-dev
   # 或使用yarn
   yarn add babel-plugin-react-native-css-modules --dev
   

2. 配置Babel
   修改项目根目录的babel.config.js，添加CSS Modules插件：

   module.exports = function(api) {
     api.cache(true);
     return {
       presets: ['babel-preset-expo'],
       plugins: [
         'react-native-css-modules'
       ]
     };
   };
   

3. 验证文件与路径
   确认App.js和App.module.css在同一目录下，文件名拼写完全一致（注意大小写，部分系统环境对文件名大小写敏感）。

4. 重启开发服务
   关闭当前Expo开发服务器，重新执行npx expo start，让Babel配置生效。

备选方案 #

如果配置后仍有问题，可考虑使用React Native生态中更成熟的样式方案，比如styled-components或tailwindcss-react-native，这类工具无需额外配置即可直接使用。

内容的提问来源于stack exchange，提问作者10xNerd