VS code自动将Sass编译为CSS 二

要实现Sass到CSS的自动编译，在 VS code自动将Sass编译为CSS 一 的基础上我们还有几个步骤要完成。

第一步：安装 Gulp 和 gulp-sass######

# sudo install -g gulp gulp-sass```

######第二步：创建 Gulp Task ######
在项目的根目录下创建 *gulpfile.js* ，写入以下内容：

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

gulp.task('sass', function() {
gulp.src('*.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}))
});

gulp.task('default', ['sass'], function() {
gulp.watch('*.scss', ['sass']);
})```

gulpfile.js

第三步：修改 tasks.json 配置######

修改 tasks.json 内容，让 node-scss 能够监听 style.scss 的变化：

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always",
            "isWatching": true
        }
    ]
}```

######第四步：运行Build任务######
点击 **⇧⌘B** 会执行 ```node-sass  --watch styles.scss styles.css```
 命令，监听 *style.scss*文件的变化并编译到 *style.css*。
![监听styles.scss变化并编译](https://img.haomeiwen.com/i1717809/7c45dc7638b32f42.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)