ParcelJS中使用波浪号路径无法从node_modules导入CSS文件

这个问题我之前也碰到过，核心原因是Parcel对SCSS预处理器的导入逻辑和纯CSS文件的导入逻辑是分开处理的，加上你对~符号的用法有点小误区，咱们一步步拆解：

为什么会报错？ #

1. .sassrc的配置只对SCSS/Sass文件生效：你在.sassrc里配置了includePaths: ["node_modules"]，所以SCSS预处理器在处理@import '~bootstrap/scss/bootstrap'时，会把~当成指向includePaths里目录的前缀，直接去node_modules里找对应的文件，这也是为什么Bootstrap的SCSS能正常导入。
2. 纯CSS文件的@import不识别~：当你在SCSS里写@import '~/node_modules/aos/dist/aos.css'时，Parcel会把这个路径当成普通的文件路径解析——它会从当前文件（src/style/vendor.scss）所在目录出发，去寻找~/node_modules/...这个相对路径，自然找不到对应的文件，所以抛出了"Cannot resolve dependency"的错误。

可行的解决方案 #

根据你的需求，有几种不同的解决方式：

1. 去掉~，直接利用SCSS的includePaths配置 #

既然你已经把node_modules加入了SCSS的includePaths，直接写不带~的路径即可，SCSS预处理器会自动去node_modules里查找：

@import 'aos/dist/aos.css';

这种方式最贴合你现有的配置，不需要额外修改其他文件。

2. 使用相对路径指向node_modules #

如果不想依赖includePaths配置，可以直接用相对路径从当前SCSS文件定位到node_modules里的CSS文件：

@import '../../node_modules/aos/dist/aos.css';

路径计算逻辑：src/style/vendor.scss → 上两级到项目根目录 → 进入node_modules找到目标文件。

3. 推荐：通过JS入口直接导入CSS（Parcel的原生方式） #

Parcel更推荐从JS入口导入静态资源，这样它能更高效地处理依赖打包。你可以在入口JS文件（比如src/index.js，需要在index.html里引入）中添加：

import 'aos/dist/aos.css';

这种方式不需要配置任何路径，Parcel会自动在node_modules里查找对应的包资源，是最省心的方案。

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