导入Bootstrap 5 sass变量到项目sass文件时报错找不到样式表如何解决

这个错误是Sass编译器无法找到你指定的导入文件导致的，核心诱因有3类，你可以逐一排查：

• 路径命名不匹配：你贴出的导入语句用的是bootstrap/scss/前缀，但报错里实际执行的导入路径是bootstrap5/scss/_functions.scss，说明你代码里实际写的导入前缀和你存放到项目里的Bootstrap源码文件夹名称不一致，要么文件夹叫bootstrap但你写了bootstrap5，要么反过来。
• 相对路径层级错误：从报错日志能看到你的styles.scss存放在sass/目录下，如果你把Bootstrap源码文件夹放在了项目根目录，直接写bootstrap/scss/xxx会让编译器去sass/bootstrap/scss/路径下找文件，自然找不到。
• 缺少Sass加载路径配置：如果用构建工具（Vite/Webpack/Gulp等）编译Sass，没有把Bootstrap所在的目录配置到Sass的includePaths规则里，编译器也无法识别非相对路径的导入语句。

按优先级依次操作即可解决：

1. 先统一路径+补全相对层级：首先确认Bootstrap源码文件夹的实际名称，和导入语句里的前缀保持完全一致，再按照文件相对位置补全路径前缀，不需要写下划线和.scss后缀，Sass会自动识别部分导入文件：

// 示例：sass目录和bootstrap文件夹都放在项目根目录，需要回退一级找bootstrap文件夹
@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";

2. 配置Sass加载路径（可选，简化后续导入写法）：
   • Vite环境：在vite.config.js的css.preprocessorOptions.scss.includePaths数组中加入Bootstrap源码所在的父目录路径
   • Webpack环境：在sass-loader的配置项中添加sassOptions.includePaths: [path.resolve(__dirname, 'node_modules')]（如果是npm装的Bootstrap）或者你手动放源码的目录
   • 原生sass命令编译：执行编译时加上--load-path 你的Bootstrap父目录路径参数
     配置完成后就可以直接写@import "bootstrap/scss/functions";，不需要每次写长相对路径。
3. 如果你是通过npm安装的Bootstrap而非手动下载源码，直接用@import "bootstrap/scss/functions"即可，大部分现代构建工具会自动去node_modules目录下查找对应包。

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