Laravel5.6升级Bootstrap-scss至4.0.0时npm报错求助

这个错误的核心原因是Bootstrap 4的包结构、命名与Bootstrap 3的bootstrap-sass完全不同——你卸载旧包后，原来的SCSS导入路径已经失效，而且Bootstrap 4的npm包名称也发生了变化。下面是具体的修复步骤：

1. 确保安装了正确的Bootstrap 4依赖 #

Bootstrap 4的官方npm包bootstrap已经内置了SCSS源码，不需要单独安装bootstrap-scss。先彻底清理旧依赖，再安装对应版本：

# 卸载旧的bootstrap-sass包
npm uninstall bootstrap-sass

# 安装Bootstrap 4.0.0官方包
npm install bootstrap@4.0.0

另外，Bootstrap 4的下拉菜单、弹窗等组件依赖popper.js，需要额外安装适配版本：

npm install popper.js@1.16.1

2. 修改SCSS导入路径 #

你的app.scss第9行还在引用旧的bootstrap-sass路径，需要替换为Bootstrap 4的SCSS入口文件：

报错的旧代码： #

@import "~bootstrap-sass/assets/stylesheets/bootstrap/bootstrap.scss";

替换为新代码： #

@import "~bootstrap/scss/bootstrap";

Bootstrap 4的SCSS主文件位于node_modules/bootstrap/scss/bootstrap.scss，用~bootstrap/scss/bootstrap即可（.scss后缀可省略）。

3. 额外注意事项 #

• 如果之前有自定义Bootstrap变量，Bootstrap 4的变量命名规则有变化，比如原$brand-primary改为$primary，需要同步调整你的自定义变量文件。
• 运行构建工具（如gulp-sass）前，建议清除缓存，避免旧路径的缓存残留影响构建结果。

你遇到的错误信息回顾： #

Error: File to import not found or unreadable: ~bootstrap-sass/assets/stylesheets/bootstrap/bootstrap.scss.
on line 9 of resources/assets/sass/app.scss

@import "~bootstrap-sass/assets/stylesheets/bootstrap/bootstrap.scss";
^

这个提示已经很明确：你引用的bootstrap-sass包已经被卸载，对应的文件路径自然不存在，替换为Bootstrap 4的导入路径就能解决问题。

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