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文件，并写人以下代码

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小白 谢谢！