使用gulp-sass时遇导入警告与Invalid glob错误求助

云上老周

2026-7-14

解决Gulp处理SCSS的导入警告与路径报错

问题回顾

初始代码使用import dartSass from 'sass'，执行gulp命令时收到警告：import sass from 'sass'已废弃，需改用import * as sass from 'sass'
修改导入方式为import * as dartSass from 'sass'后，执行gulp出现报错：Error: Invalid glob argument: undefined

初始代码：

import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import rename from 'gulp-rename';

const sass = gulpSass(dartSass);

修改后代码：

import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import rename from 'gulp-rename';

const sass = gulpSass(dartSass);

解决步骤

1. 修正SCSS文件路径（核心问题）

Error: Invalid glob argument: undefined本质是gulp任务中指定的SCSS源文件路径（glob）为undefined。检查你的scss任务代码，确保src()方法传入了正确的实际路径：

示例正确任务写法：

export function scss() {
  return gulp.src('./src/scss/**/*.scss') // 替换为你项目中SCSS文件的真实路径
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/css'));
}

2. 适配dart-sass的导入规范

dart-sass的ES模块导入确实需要使用import * as sass from 'sass'，你的修改是符合规范的。如果仍有兼容问题，建议更新gulp-sass到最新版本：

npm update gulp-sass

3. 完整正确代码示例

import gulp from 'gulp';
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import rename from 'gulp-rename';

const sass = gulpSass(dartSass);

export function scss() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/css'));
}

export default gulp.series(scss);