Sass、Less、Stylus等CSS预处理器的出现大大的提升了CSS的开发速度和代码可读性，相对来说Sass功能更全面、使用的更广泛，之前好几个项目我都用了Sass，刚一开始我本机用着都一切安好，后来慢慢的发现不少问题。
编译Sass的工具我选了用于Grunt的grunt-sass和用于Webpack的sass-loader，这样可以避免单独配置Ruby和ruby-sass，但是我一直没察觉这为后面埋下了无数个地雷，每一次迁移环境或者给新同事搭建环境时，都会遇到node-sass安装失败，刚开始连VPN就好了，后来Node的版本升级越来越频繁，每一次更换Node版本都需要执行npm rebuild node-sass重新编译node-sass, 再后来，团队使用Jenkins自动化部署时同样的问题再次出现，Jenkins服务器不可能为了安装个node-sass单独连VPN，于是只能寻找解决方法。
仔细看了NPM上了两个类似的库的说明文档：grunt-sass和grunt-contrib-sass, 对比了grunt-sass和grunt-contrib-sass后，决定改用后者，下面是我的一些对比结果
grunt-sass:
- 依赖
node-sass库，不需要另外安装Ruby和Sass编译工具； - 安装时需要翻墙；
- 每次更新Node版本时，需要重新编译
node-sass(喜欢使用nvm的同学简直了);
grunt-contrib-sass:
- 依赖 Ruby和
ruby-sass，（配置一劳永逸）; - 有时候
gem install sass安装时有点慢，但使用淘宝的RubyGems镜像可以改善；
而Webpack的用户同样有一些替代的Loader可以使用，一般都直接使用sass-loader，如果你同样遇到我所遇到的那些问题，并且感到深深的不爽，那么可以试试用这两个库：
- sass-loader-china：据说是专为国情优化过的；
- ruby-sass-loader：这是一个使用原生Ruby和ruby-sass的Loader, 需要先配置Ruby环境并安装ruby-sass;
大概步骤
Grunt
- 卸载grunt-sass:
cd ${YourProjectDir} && npm uninstall grunt-sass --save-dev; - 安装Ruby: Mac已经自带了Ruby, Linux和Windows请自行Google;
- 安装ruby-sass:
gem install sass, 如果Mac或Linux有遇到权限错误，请使用sudo gem install sass安装； - 安装grunt-contrib-sass:
npm install grunt-contrib-sass; - 已完成，Gruntfile中Sass任务的配置不用修改，两个库的配置属性是一样的；
Webpack
- 卸载sass-loader:
npm uninstall sass-loader --save-dev; - 安装Ruby: Mac已经自带了Ruby, Linux和Windows请自行Google;
- 安装ruby-sass:
gem install sass, 如果Mac或Linux有遇到权限错误，请使用sudo gem install sass安装； - 安装sass-loader-china或ruby-sass-loader，这两个根据你自己的爱好任选其一;
- 根据步骤4选择的Loader, 对于的修改您项目中
webpack.config.js的sass-loader的配置；