gulp-sass基础使用（基于gulp4.0）

最新推荐文章于 2024-11-06 07:32:35 发布

phoebe_huang

最新推荐文章于 2024-11-06 07:32:35 发布

阅读量1.1k

点赞数

分类专栏： gulp 文章标签： sass 前端

本文链接：https://blog.youkuaiyun.com/PigBiBiX/article/details/105482270

版权

gulp 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Gulp4.0环境下配置Sass，包括安装node-sass和gulp-sass，基础使用方法，以及如何避免常见错误。文章提供同步编译示例，并更新了原始示例以适应Gulp4.0版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github地址： https://github.com/dlmanning/gulp-sass

由于github的说明文档是基于比 gulp 4.0低的版本，所以我们跟着练习，会出现一些小错误。下面结合原文，对原文示范的例子做出了一些修改。

1、安装

npm install node-sass gulp-sass --save-dev

2、基础使用

    'use strict';

    var gulp = require('gulp');
    var sass = require('gulp-sass');

    sass.compiler = require('node-sass');

    gulp.task('sass', function () {
        return gulp.src('./sass/**/*.scss')
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest('./css'));
    });

    gulp.task('sass:watch', function () {
        gulp.watch('./sass/**/*.scss', gulp.series('sass'));
    });

如果按照原文的例子，会出现下面的错误，因为在gulp4.0之后已经只能接受watch第二个参数为函数，可以使用 gulp.parallel或者gulp.series

3、同步编译

    'use strict';

    var gulp = require('gulp');
    var sass = require('gulp-sass');

    sass.compiler = require('node-sass');

    gulp.task('sass', function () {
        return gulp.src('./sass/**/*.scss')
            .pipe(sass.sync().on('error', sass.logError))   // 同步执行
            .pipe(gulp.dest('./css'));
    });

    gulp.task('sass:watch', function () {
        gulp.watch('./sass/**/*.scss', gulp.series('sass'));
    });