React项目无法导入CSS文件，提示找不到./src/style.css该如何解决

1. 基础路径&文件属性校验 #

• 首先确认文件名大小写完全匹配：打包工具对大小写敏感，若实际文件名为Style.css而非style.css会触发报错
• 开启系统的文件扩展名显示，确认文件没有隐藏后缀，避免实际是style.css.txt这类错误命名
• 清除项目缓存：删除根目录下的.expo缓存文件夹、node_modules文件夹，重新执行依赖安装后再启动项目

2. Expo 项目CSS导入配置补充 #

从你的项目结构可以看到这是Expo框架的React项目，Expo默认未开启全局CSS文件导入支持，需要补充对应配置：

1. 根目录新建metro.config.js，添加以下配置启用CSS文件解析：

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

const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push('css');

module.exports = config;

2. 修改根目录的babel.config.js，添加web端CSS转换插件：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-web'],
  };
};

3. 兼容替代方案 #

• 如果仅需要在web端生效，可以将style.css放到assets文件夹下，在web端入口HTML文件中用<link rel="stylesheet" href="/assets/style.css">直接引入
• 若要兼容多端，建议使用Expo官方推荐的StyleSheet API编写样式，无需额外配置即可同时兼容iOS/安卓/Web三端
• 也可以将CSS文件重命名为style.module.css使用CSS模块能力，导入语句改为import styles from './src/style.module.css'即可直接使用，无需额外全局配置

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