彻底放弃node-sass改用Ruby Sass

2016-10-13

大概步骤
- Grunt
- Webpack

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的配置；

技术

大概步骤#

Grunt#

Webpack#