Sass的安装及监听环境自搭建（详细步骤）

1.安装node.js

官网下载：https://nodejs.org/zh-cn/download/
网盘下载：https://pan.baidu.com/s/1_0gbjv0Oda-dJ7LEuqe-aA
提取码：nnzv
后续安装各种环境，需要使用node.js的npm来安装，所以先安装node.js
安装完成后查看环境变量是否配置，若没有配置请自行配置（将node.js安装路径添加到PATH中）

2.安装Ruby

官网下载：http://www.ruby-lang.org/en/downloads/
网盘下载：https://pan.baidu.com/s/14EQ-JYMu4lAJhX_a719Uvg
提取码：3ab2
sass基于ruby，所以ruby是不得不安装的
安装完成后，在菜单中打开Start Command Prompt with Ruby命令，然后输入ruby -v查看是否安装成功。
注意安装时要添加环境变量PATH

3.安装Python

官网下载：https://www.python.org/downloads/
网盘下载：https://pan.baidu.com/s/1kRdcZIqtIQVb3tyHEIQglw
提取码：tvjk
由于后续本地安装sass时需要调用python，所以需要安装python
注意安装时要添加环境变量PATH

4.安装Sass

在Start Command Prompt with Ruby中执行gem install sass来安装sass，然后执行sass -v查看版本信息。

5.搭建gulp

<1>先修改npm镜像地址（否则后续安装会很慢，甚至导致安装失败）

找到node安装位置，找到node_modules\npm\npmrc，打开后全选替换以下地址

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org
prefix = D:\nodejs
cache = D:\nodejs\node_cache

prefix为node.js安装位置，cache为缓存位置

<2>全局安装gulp

执行代码（打开cmd直接执行）

npm install -g gulp

<3>本地安装gulp、插件和sass（在项目路径下）

新建sassDemo，cmd调到该文件夹内
本地安装gulp

npm install --save-dev gulp

本地安装插件gulp-concat、gulp-cssmin、gulp-autoprefixer

npm install gulp-concat gulp-cssmin gulp-autoprefixer

本地安装sass

npm install gulp-sass --save-dev

<4.>创建sass文件目录

在项目中创建app目录，app目录下创建scss目录和css目录
项目根目录下创建gulpfile.js文件，并写人以下代码

扫描二维码关注公众号，回复： 12659565 查看本文章

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

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

// 实时监听
gulp.task('watch',function(){
    
    
    gulp.watch('app/scss/*.scss',gulp.series('sass'));
});

gulp.task('default',gulp.series('watch'));

<5.>创建包描述文件（在项目路径下）

执行以下命令

npm init -y

6.启动gulp监听，开始项目

打开cmd，进入项目路径，执行gulp命令，启动gulp监听
此时，你可以在scss目录创建scss文件，保存时css目录下会创建css文件并同步该scss文件

至此，sass已安装完全，并且能够实现监听。

如有错误，欢迎各路大神及时指正
也希望能够帮助到sass小白
谢谢！