SCSS编译报错：找不到./node_modules/bootstrap/scss/functions文件怎么办？

针对你遇到的Error: File to import: ./node_modules/bootstrap/scss/functions not found错误，除了重新执行npm install，可以尝试以下几个具体解决步骤：

• 修正导入语句
  Bootstrap的functions是单个SCSS文件（_functions.scss），而非文件夹。检查你的导入代码：

  • 错误写法（带斜杠会被识别为文件夹）：@import "./node_modules/bootstrap/scss/functions/";
  • 正确写法：@import "./node_modules/bootstrap/scss/functions";
    如果你的构建工具支持解析node_modules路径，还可以简化为：@import "bootstrap/scss/functions";

• 确认Bootstrap版本兼容性
  不同版本的Bootstrap SCSS目录结构可能有差异。先查看package.json中的Bootstrap版本，若版本异常，锁定稳定版本重新安装：

  npm uninstall bootstrap
  npm install bootstrap@5.3.0 --save
  

  （注：5.3.0为当前稳定版本，可根据项目需求调整）

• 配置构建工具的SCSS路径解析
  如果使用Webpack、Gulp等工具，需确保配置了node_modules作为SCSS的解析路径，避免全路径导入出错：

  • Webpack（sass-loader配置）：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: {
                  sassOptions: {
                    includePaths: ['./node_modules'],
                  },
                },
              },
            ],
          },
        ],
      },
    };
    

  • Gulp（gulp-sass配置）：

    const sass = require('gulp-sass')(require('sass'));
    
    gulp.task('sass', function() {
      return gulp.src('src/scss/**/*.scss')
        .pipe(sass({ includePaths: ['./node_modules'] }).on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
    });
    

• 清理依赖缓存重新安装
  若npm缓存或依赖文件损坏，执行以下操作重置依赖：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• 手动验证文件存在性
  直接前往node_modules/bootstrap/scss/目录，确认_functions.scss文件是否存在。如果缺失，说明Bootstrap安装不完整，重复上述重新安装步骤。

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