运行gulp styles报错gulp-sass 5无默认Sass编译器该如何解决

报错原因 #

gulp-sass 从5.0版本开始移除了内置的Sass编译器，需要手动绑定官方的sass包才能正常使用，你遇到的报错就是没有配置编译器导致的。

解决方案 #

步骤1：安装官方Sass编译器 #

执行命令安装 dart-sass（官方推荐，替代已停止维护的node-sass）：

npm install sass --save-dev

如果使用yarn，执行对应命令即可：

yarn add sass -D

步骤2：修改gulpfile.babeljs配置 #

调整gulp-sass的引入和初始化逻辑，修改后的完整代码如下：

import gulp from 'gulp';
import yargs from 'yargs';
// 重命名引入的gulp-sass避免和编译器包重名
import gulpSass from 'gulp-sass';
// 引入安装的sass编译器
import * as sass from 'sass';
const PRODUCTION = yargs.argv.prod;
// 绑定编译器到gulp-sass
const sassCompiler = gulpSass(sass);

export const styles = () => {
    return gulp.src('src/assets/scss/bundle.scss')
        // 这里换成初始化后的sass编译器
        .pipe(sassCompiler().on('error', sassCompiler.logError))
        .pipe(gulp.dest('dist/asset/css'));
}

补充说明 #

你提到的src/assets/scss/components目录下的scss文件只要在bundle.scss中通过@import正确引入，不需要额外调整配置，上述修改完成后直接运行gulp styles即可正常编译。

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