React Native 项目中直接 import CSS 文件会报错，因 Metro 不支持解析 .css 文件，原生端无 DOM/CSSOM；仅 Web 端可通过配置 css-loader 或使用 CSS Modules（xxx.module.css）或 NativeWind（Tailwind 类名编译为平台适配样式）实现 CSS 语法支持。
React Native 项目里直接 import CSS 文件会报错
React Native 的 Metro 打包器默认不识别 .css 文件，直接写 import './App.css' 会导致构建失败，错误信息通常是 Unable to resolve module ./App.css。这不是 Web 端那种“样式没生效”，而是根本解析不了文件类型。
原因很简单：RN 原生端没有 DOM 和 CSSOM，StyleSheet.create() 是 JS 对象映射到原生视图属性的机制，和浏览器的 CSS 解析器无关。所以任何想“把 CSS 当 JS 模块引入 RN 组件”的做法，都必须先经过转译或桥接。
- Web 端（react-native-web）可以处理 CSS，但前提是构建工具（如 Webpack）已配置好
css-loader和style-loader；CRA 默认不启用，需用react-app-rewired改写 - 原生端（iOS/Android）永远无法运行纯 CSS —— 即使你用 PostCSS 编译成 JS 对象（如 NativeWind 输出的
nativewind-output.js），那也只是模拟 CSS 语义的 JS 数据，不是真实 CSS - 混用场景下，比如一个组件同时被 RN 原生和 Web 引用，
import './Button.css'在原生端会直接 crash，Web 端也可能因未配置 loader 而白屏
用 react-native-web + CSS Modules 实现 Web 兼容
如果你坚持用 CSS 语法写样式，且只在 Web 端生效（或通过 react-native-web 渲染），推荐走 CSS Modules 路线：它能避免全局污染，也适配 CRA 默认配置（只要文件名是 xxx.module.css）。
示例：
立即学习“前端免费学习笔记（深入）”；
/* Button.module.css */
.container {
padding: 12px 20px;
background-color: #007AFF;
}
.container:hover {
opacity: 0.8;
}
在组件中使用：
import React from 'react';
import styles from './Button.module.css';
<p>export default function Button() {
return <div className={styles.container}>Click</div>;
}
- CRA 默认支持
.module.css，无需额外配置；但注意：这仅对 Web 生效，RN 原生端完全忽略该 import - 不能在
styleprop 中使用className——<View style={styles.container}>是错的，style只接受 JS 对象，className是 DOM 属性，只在 Web 渲染时由react-native-web映射 - 媒体查询、伪类（
:hover）、CSS 变量等仅在 Web 端起作用，原生端无对应能力
NativeWind 是目前唯一能“两端共用 CSS 语法”的方案
NativeWind 不是让你写 CSS 然后“塞进 RN”，而是把 Tailwind 类名（如 flex-col p-4 bg-blue-500）在构建期编译为平台适配的样式对象：Web 端输出 CSS 样式表，原生端输出 StyleSheet.create() 兼容的 JS 对象。
关键点：
- 必须用
className，不是style：<View className="flex-1 p-4">—— 这行代码在 iOS/Android/Web 都能运行 - Web 端依赖
nativewind/tailwind/css插件注入 CSS；原生端依赖nativewind/postcss生成nativewind-output.js，并在入口处import 'nativewind-output.js' - v2 版本严格要求
tailwindcss@3.3.2，升级到 v4 才支持更高版本；若content字段漏掉某个.tsx目录，对应组件的类名就不会被提取，样式丢失且无提示 - 不支持任意 CSS 写法（比如自定义选择器、嵌套规则），只支持 Tailwind 官方 utility class 体系
别踩这些兼容性深坑
很多开发者以为“只要用了 react-native-web，CSS 就自动通了”，结果在真机调试或 CI 构建时翻车。最常被忽略的三个点：
-
react-native-web的StyleSheet并不完全等价于浏览器 CSS：比如display: grid在 RNW 中需显式启用__DEV__模式或用_web键（如unistyles的写法），否则会被静默忽略 - 字体图标（如 Material Icons）在 Web 端要靠
@font-face注入，而原生端走的是react-native-vector-icons的本地字体注册流程，二者路径、加载时机、fallback 行为完全不同 - 第三方 UI 库（如
react-native-elements）默认发布的是 TSX 源码，CRA 不会转译node_modules下的 JSX —— 必须用babelInclude显式加入转译范围，否则 Web 构建直接失败
跨平台样式不是“写一次，到处跑”，而是“写一套语义，由不同引擎各自解释”。真正难的从来不是语法，是搞清每个平台的样式边界在哪里。
