使用Gulp转换Bootstrap-Material Scss为CSS时遇导入未找到错误

你遇到的核心问题是gulp-sass（准确说是它依赖的node-sass）不支持webpack风格的~路径别名——这个波浪号是webpack用来快速指向项目根目录node_modules的约定，但node-sass本身并不认识它，所以就算文件实际存在，编译时还是会提示找不到。

快速解决方案：配置sass的includePaths #

你只需要在gulp的styles任务里，给sass()方法添加includePaths选项，告诉sass去哪里找bootstrap的scss文件，这样@import "bootstrap/scss/functions";就能正常解析了（甚至可以把~去掉，留着也没关系，因为includePaths会帮你定位到对应目录）。

修改你的gulpfile.js里的styles任务：

gulp.task('styles', function () {
  gulp.src(sassFiles)
    .pipe(sass({
      // 添加这一行，指向bootstrap的scss目录
      includePaths: ['./node_modules/bootstrap/scss']
    }).on('error', sass.logError))
    .pipe(gulp.dest(cssDest));
});

如果你的bootstrap确实安装在static/node_modules里（从你的项目结构看似乎有两个node_modules目录，不太推荐这种做法，建议统一在项目根目录管理依赖），那把路径改成./static/node_modules/bootstrap/scss即可。

补充说明：为什么硬编码能解决但不推荐？ #

你手动替换成绝对路径能生效，是因为sass能直接识别绝对路径，但这种方式完全不具备可移植性——换台电脑或者部署到服务器上路径就会失效，而配置includePaths是更通用的解决方案，让sass自动去指定目录下查找导入的文件。

另外，检查一下你的项目依赖：你在根目录的package.json里已经声明了bootstrap，建议把static/node_modules里的依赖删掉，统一用根目录的node_modules，避免依赖重复和路径混淆。

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