Angular13中使用gulp-sass合并SCSS文件报错求助

问题分析 #

报错Can't find stylesheet to import的核心原因是：Sass编译器默认只会搜索当前文件目录，不会自动查找node_modules下的依赖包，因此无法定位@angular/material的样式文件。另外你的目标是生成单个SCSS文件而非CSS，需要调整Gulp任务的处理逻辑。

解决方案 #

1. 修复导入路径（编译CSS验证用） #

如果只是需要验证编译是否正常（生成CSS文件），在gulp-sass的配置中添加includePaths指向node_modules即可：

gulp.task('default', function () {
  return gulp.src('./lib/src/lib/theming/prebuilt/internal.scss')
    .pipe(sass({
      includePaths: ['./node_modules'] // 告诉Sass去node_modules目录查找依赖
    }).on('error', sass.logError))
    .pipe(concat('test-internal.css'))
    .pipe(gulp.dest('./dist/lib/theming/'))
    .pipe(browserSync.reload({ stream: true }))
});

2. 生成合并后的单个SCSS文件（你的最终目标） #

要将所有导入的SCSS文件合并为单个SCSS，需要用gulp-scss-combine处理导入逻辑，同时配置它的搜索路径：

gulp = require('gulp');
sass = require('gulp-sass')(require('sass'));
combine = require('gulp-scss-combine');
concat = require('gulp-concat');
browserSync = require('browser-sync').create();

gulp.task('default', function () {
  return gulp.src('./lib/src/lib/theming/prebuilt/internal.scss')
    // 处理所有SCSS导入（包括@use语法），合并为单份SCSS内容
    .pipe(combine({
      includePaths: ['./node_modules'] // 让工具能找到@angular/material的文件
    }))
    .pipe(concat('test-internal.scss'))
    .pipe(gulp.dest('./dist/lib/theming/'))
    .pipe(browserSync.reload({ stream: true }))
});

3. 注意事项 #

• 确认gulp-scss-combine支持Dart Sass的@use语法，如果该工具不兼容，可尝试替换为sass-embedded配合自定义导入收集逻辑，或者使用gulp-sass-glob辅助处理批量导入。
• 合并完成后要检查SCSS内容，确保@use的命名空间、变量和混合器引用正常，避免出现语法错误。
• 确保所有依赖包已正确安装：执行npm install gulp gulp-sass sass gulp-scss-combine gulp-concat browser-sync --save-dev。

备选方案（当gulp-scss-combine不兼容@use时） #

如果上述工具无法处理@use语法，可以直接用Dart Sass的API收集并合并所有导入的SCSS文件：

const gulp = require('gulp');
const sass = require('sass');
const fs = require('fs');
const path = require('path');

gulp.task('bundle-scss', function (done) {
  const inputPath = './lib/src/lib/theming/prebuilt/internal.scss';
  const outputPath = './dist/lib/theming/test-internal.scss';

  // 自定义递归函数收集所有导入的SCSS文件
  function collectImports(filePath, collected = new Set()) {
    if (collected.has(filePath)) return;
    collected.add(filePath);
    const content = fs.readFileSync(filePath, 'utf8');
    // 匹配@import和@use的导入路径（简单正则，可根据实际情况调整）
    const importRegex = /@(use|import)\s+['"]([^'"]+)['"]/g;
    let match;
    while ((match = importRegex.exec(content)) !== null) {
      let importPath = match[2];
      // 处理模块导入（如@angular/material）
      if (importPath.startsWith('@')) {
        importPath = path.join('./node_modules', importPath.replace('/', path.sep));
        // 补充.scss后缀（如果没有）
        if (!path.extname(importPath)) importPath += '.scss';
      } else {
        importPath = path.join(path.dirname(filePath), importPath);
        if (!path.extname(importPath)) importPath += '.scss';
      }
      if (fs.existsSync(importPath)) {
        collectImports(importPath, collected);
      }
    }
    return collected;
  }

  const allFiles = collectImports(inputPath);
  // 按收集顺序合并文件内容（实际场景可根据导入依赖关系调整顺序）
  const combinedContent = Array.from(allFiles).map(file => fs.readFileSync(file, 'utf8')).join('\n');
  fs.writeFileSync(outputPath, combinedContent);
  done();
});

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