执行expo build:android时antd-mobile CSS模块解析错误求助

我来帮你搞定这个打包报错问题！从你提供的配置和错误信息来看，核心问题是babel-plugin-import的样式导入配置和 antd-mobile 2.x 版本的文件结构不匹配，再加上 Expo Metro 打包器对第三方 CSS 的处理限制导致的。下面是几个针对性的解决方案：

方案一：调整 babel-plugin-import 的样式导入策略 #

antd-mobile 2.x 内部是用 Less 编写的，你当前配置的style: "css"会让插件尝试导入编译后的 CSS 文件，但这个版本的 CSS 文件路径可能和插件预期的不一致。改成直接导入 Less 源文件试试：

1. 先安装 Less 相关依赖：

npm install less less-loader --save-dev

2. 修改babel.config.js里的插件配置：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        "import",
        { libraryName: "antd-mobile", style: true } // 把"css"改成true
      ]
    ]
  };
};

方案二：降级 antd-mobile 到更兼容的版本 #

Expo SDK 36 对应的 React Native 版本比较旧（0.61.x），antd-mobile 2.3.1 可能没针对这个环境做适配。试试降级到 2.2.10 版本，这个版本在旧版 Expo 中兼容性更好：

npm install antd-mobile@2.2.10 --save

更新依赖后再重新执行构建命令。

方案三：手动导入全局 CSS（临时应急方案） #

如果上面两个方案都不生效，可以跳过插件的自动样式导入，手动在项目入口（比如App.js）导入 antd-mobile 的全局 CSS 文件：

import 'antd-mobile/dist/antd-mobile.css';

同时修改babel.config.js，关闭插件的自动样式导入：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        "import",
        { libraryName: "antd-mobile", style: false } // 关闭样式自动导入
      ]
    ]
  };
};

方案四：彻底清理缓存并重建 #

你已经做了部分缓存清理，再补充以下步骤确保完全清除缓存：

# 删除 node_modules 和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清除 Expo 缓存
expo r -c
# 重新构建 Android 包
expo build:android

验证建议 #

先运行本地开发服务器测试：

expo start --android

如果本地能正常启动且没有报错，再执行构建命令，应该就能解决这个模块解析的问题了。

内容的提问来源于stack exchange，提问作者Triyugi Narayan Mani