首页 > 解决方案 > 使用 gulp 4.0.2 创建 gulp-sass 任务 (2.0.0)

问题描述

gulpfile.js

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

gulp.task('sass', function() {
    return gulp
        .src('scss/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('css/'))
});

任务

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "sass",
            "type": "gulp",
            "task": "sass",
            "problemMatcher": [
                "$eslint-stylish"
            ]
        }
    ]
}

gulp 版本 4.0.2 gulp CLI 版本 2.2.0 gulp-sass 版本 4.0.2

如果我在终端上尝试 > gulp sass,它运行良好如果我尝试 Ctrl+Shift+P -> 运行任务 - 得到错误:

Error: The gulp task detection didn't contribute a task for the following configuration:

标签: sassvisual-studio-codegulp

解决方案


我发现我的错误:

const gulp = require('gulp');
const sass = require('gulp-sass');
const sasssrc = ['scss/*.scss'];

function scss (){
    return gulp
        .src(sasssrc)
        .pipe(sass())
        .pipe(gulp.dest('css'));
}
exports.scss = scss;

使用 task.json:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "sass",
            "type": "gulp",
            "task": "scss",
            "problemMatcher": [
                "$eslint-stylish"
            ]
        }
    ]
}

推荐阅读