React Native 本身不支持解析 CSS 文件，import './App.css' 在纯 RN 项目中会直接报错；在 React Native for Web 中需借助构建工具或 unistyles 等库实现样式注入与跨平台兼容。
React Native 本身不解析 CSS 文件，import './App.css' 在纯 RN 项目中会直接报错 —— 这不是配置问题，而是底层不支持。真正在 Web 环境（如 React Native for Web）中“引入 CSS”，本质是靠构建层（如 Webpack、Metro 的 web 插件）和运行时适配器协同完成的，不是 RN 自身能力。
为什么 import './style.css' 在 React Native Web 中可能失效
React Native for Web 默认禁用原生 CSS 导入；即使你用 Metro 启用了 assetPlugins 或配置了 sourceExts，也仅能加载资源，不会自动注入样式规则。常见错误现象包括：
-
Unable to resolve "./App.css" from "./App.js"（路径未被识别） - 样式导入无报错但完全不生效（CSS 被读取却未插入
<head>） - 全局类名污染，且无法与
StyleSheet.create混用
根本原因：RN 的 StyleSheet 是 JS 对象抽象，而 Web 的 CSSOM 需要显式挂载。二者不互通。
在 React Native for Web 中安全使用 CSS 的两种路径
必须明确区分「纯样式定义」和「样式应用时机」：
立即学习“前端免费学习笔记（深入）”；
- 若你用的是
react-native-web（官方兼容层），推荐通过require('!style-loader!css-loader!./App.css')手动强制注入（需自定义 Metro 配置 +style-loader支持） - 更稳妥的做法是改用
react-native-unistyles：它把 CSS 写法转为 JS 对象，再由其 Web 解析器生成真实<style>标签 —— 这才是 RN Web 场景下真正“解析 CSS”的方式 - 不要混用
StyleSheet.create和外部 CSS 类名：例如<View className="my-button">+style={styles.container}会导致优先级冲突和响应式断点失效
react-native-unistyles 中的 Web 专属 CSS 写法
它不让你写原始 CSS，而是用 JS 对象模拟 CSS 语义，并通过 _web 键精准控制 Web 行为：
const styles = StyleSheet.create({
button: {
backgroundColor: '#007AFF',
_web: {
cursor: 'pointer',
_hover: { backgroundColor: '#0056b3' },
_focus: { outline: '2px solid #007AFF' }
}
}
});
注意几个关键点：
-
_web下的属性不会传递给 iOS/Android，只参与 Web 端 CSS 生成 -
_hover、_focus等伪类必须用下划线前缀，不能写成:hover - 媒体查询由
fontSize: { xs: 14, md: 16 }这类对象自动编译为@media (min-width: 768px)，无需手写@media - 生成的 class 名带哈希（如
.unistyles_kaoph5），避免全局污染
容易被忽略的构建与运行时陷阱
即使代码写对，以下环节出错仍会导致 CSS 不生效：
- Metro 配置未启用
react-native-unistyles/metro-plugin，导致_web键被忽略 - Web 入口文件（如
index.web.js）未调用setup()初始化 unistyles：缺少import { setup } from 'react-native-unistyles'; setup(); - 在非 Web 平台（如 iOS）里误用了
_web，虽然不报错，但该样式段完全被跳过 —— 无法 fallback - 使用了 Web-only 的 CSS 属性（如
grid、backdrop-filter），但在 Android/iOS 上无等效实现，造成跨平台视觉断裂
最隐蔽的问题是：样式在开发时正常，打包后失效 —— 往往因为生产环境的 Metro minify 阶段删掉了带下划线的键名（如 _hover），必须在 metro.config.js 中配置 minifierConfig 保留这些字段。
