NativeWind 在 NX 单仓库项目中的集成问题与解决方案

问题背景

NativeWind 是一个流行的 React Native 样式解决方案，它允许开发者使用 Tailwind CSS 语法来编写 React Native 样式。在版本 4.1.11 之后，一些开发者报告了在 NX 单仓库(monorepo)项目中集成 NativeWind 时出现的问题，主要表现为样式无法正确加载，并显示"Nativewind received no data"的错误提示。

问题分析

经过开发者社区的讨论和测试，发现问题主要出现在以下几个方面：

1. 配置文件的路径处理：在单仓库项目中，Tailwind CSS 的配置文件需要正确处理跨包的引用路径。

2. NX 项目结构适配：NX 的特殊项目结构需要额外的配置来确保 NativeWind 能够正确扫描和编译样式。

3. 构建工具链集成：Metro 打包工具和 Babel 转换器的配置需要针对 NativeWind 进行特殊处理。

解决方案

1. Metro 配置调整

在项目的 metro.config.js 文件中，需要进行以下配置：

const { withNxMetro } = require('@nx/expo');
const { getDefaultConfig } = require('@expo/metro-config');
const { mergeConfig } = require('metro-config');
const { withNativeWind } = require('nativewind/metro');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

const customConfig = {
  cacheVersion: 'your-cache-version',
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
  },
};

async function createConfig() {
  const nxConfig = await withNxMetro(mergeConfig(defaultConfig, customConfig), {
    debug: false,
    extensions: [],
    watchFolders: [],
  });

  const nativeWindConfig = withNativeWind(nxConfig, {
    input: './src/global.css',
  });
  nativeWindConfig.resetCache = true;
  return nativeWindConfig;
}

module.exports = createConfig();

2. Tailwind CSS 配置优化

在 tailwind.config.js 文件中，需要使用 NX 提供的工具函数来正确扫描依赖：

const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(
      __dirname,
      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
    ),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Babel 配置调整

.babelrc.js 文件需要包含 NativeWind 的预设：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
      'nativewind/babel',
    ]
  };
};

构建环境特殊处理

对于 EAS 构建环境，开发者报告了 NX 项目图(ProjectGraph)未生成的问题，这会导致 Tailwind CSS 无法正确扫描依赖。解决方案是在 eas-build-post-install 脚本中手动生成项目图：

(async function () {
  try {
    console.log('Generating NX ProjectGraph...');
    const { createProjectGraphAsync } = await import('@nx/devkit');
    await createProjectGraphAsync();
    console.log('NX ProjectGraph generated successfully');
  } catch (error) {
    console.error('Error in eas-build-post-install script:', error.message);
    process.exit(1);
  }
})();

经验总结

1. 版本兼容性：虽然问题最初出现在 4.1.11 版本之后，但实际测试表明，正确的配置可以适用于多个版本。

2. 项目结构影响：NX 单仓库的特殊结构需要开发者特别注意配置文件的路径处理和依赖扫描。

3. 构建环境差异：本地开发环境和云端构建环境可能存在差异，需要针对性地解决问题。

4. 工具链整合：NativeWind 与 React Native、Expo、NX 等工具的整合需要细致的配置调整。

通过以上解决方案，开发者可以成功在 NX 单仓库项目中集成 NativeWind，并解决样式不加载的问题。这些经验也提醒我们，在复杂的前端生态系统中，工具链的整合往往需要开发者深入理解各工具的工作原理和相互之间的兼容性问题。