React JS中如何导入同级兄弟文件夹下的CSS文件

避免路径判断出错，先把你描述的层级关系列清楚：

sidebar/
├── components/
│   └── Sidebar.js  # 你需要写导入逻辑的源文件
└── styles/
    └── sidebar.css  # 需要引入的目标样式文件

方案1：原生相对路径导入（零配置，全项目通用） #

这是最通用的实现方式，不需要修改任何工程配置：

• 路径跳转逻辑：Sidebar.js位于sidebar/components路径下，要找到同属sidebar目录的styles文件夹，需要先通过../向上回退一级，回到两个文件夹共同的父级目录，再进入styles目录定位css文件
• 直接把下面的导入语句写在Sidebar.js的文件顶部即可：
  import '../styles/sidebar.css';
• 高频踩坑提醒：
  • 不要写./styles/sidebar.css：这个路径是在当前components目录下找styles文件夹，实际不存在会直接报模块找不到错误
  • 不要写../../styles/sidebar.css：这个路径会向上回退两级到sidebar的外层目录，同样定位不到目标文件

方案2：路径别名导入（适合已配置路径规则的工程化项目） #

如果你的前端项目已经配置了路径别名（比如React、Vue项目常见的@别名映射src源码根目录），可以直接用别名写导入，完全不需要计算相对路径层级：

• 假设sidebar文件夹存放在src源码目录下，导入写法为：
  import '@/sidebar/styles/sidebar.css';
• 优势：后续如果移动文件位置、调整目录层级，只要别名映射的根目录不变，导入路径就不需要跟着修改，不会因为目录移位出现路径失效问题

导入路径是大小写完全敏感的，比如实际css文件命名为Sidebar.css就不能写成sidebar.css——这类问题在本地Windows开发环境可能正常运行，但部署到Linux环境的构建流程中会直接报错。

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