使用Expo+NativeWind开发React Native时CSS导入出现数字转义错误

问题分析 #

报错提示The only valid numeric escape in strict mode is '\0'，根源是Windows系统下生成的CSS导入路径使用了未转义的反斜杠\。在JS字符串中，反斜杠是转义字符，比如路径中的\m会被解析为非法转义序列，触发严格模式下的语法错误。

解决方案 #

1. 修复Metro Transformer集成 #

自定义的metro.transformer.js未集成NativeWind的Transformer，导致生成的CSS路径未被正确处理。修改文件如下：

const upstreamTransformer = require("@expo/metro-config/babel-transformer");
const svgTransformer = require("react-native-svg-transformer");
const nativeWindTransformer = require("nativewind/metro-transformer");

module.exports.transform = async ({ src, filename, options }) => {
  // 优先处理NativeWind CSS文件
  if (filename.endsWith(".css")) {
    return nativeWindTransformer.transform({ src, filename, options });
  }
  // 处理SVG文件
  if (filename.endsWith(".svg")) {
    return svgTransformer.transform({ src, filename, options });
  }
  // 其他文件交给上游Expo Transformer
  return upstreamTransformer.transform({ src, filename, options });
};

2. 调整Metro配置 #

修改metro.config.js，确保NativeWind配置正确，禁用绝对路径生成：

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

// 添加CSS到Metro资源扩展名列表
config.resolver.assetExts.push('css');

module.exports = withNativeWind(config, { 
  input: './global.css',
  // 强制生成相对路径，避免Windows反斜杠问题
  generateAbsolutePaths: false 
});

3. 彻底清除缓存 #

执行以下命令清除所有相关缓存：

# 清除Expo缓存并重启项目
npx expo start --clear

# Windows系统手动删除NativeWind缓存文件夹
rd /s /q node_modules\.cache\nativewind

# macOS/Linux系统
rm -rf node_modules/.cache/nativewind

4. 验证导入语句 #

确保app/_layout.tsx中的CSS导入保持相对路径（当前写法是正确的）：

import "../global.css";

额外注意事项 #

• 确认使用的NativeWind 4.x版本配置正确，v4与v3的Metro配置差异较大，必须使用withNativeWind方法。
• 无需修改global.css内容，当前的Tailwind指令写法是正确的。

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