彻底放弃node-sass改用Ruby Sass

SassLessStylus等CSS预处理器的出现大大的提升了CSS的开发速度和代码可读性,相对来说Sass功能更全面、使用的更广泛,之前好几个项目我都用了Sass,刚一开始我本机用着都一切安好,后来慢慢的发现不少问题。

编译Sass的工具我选了用于Gruntgrunt-sass和用于Webpacksass-loader,这样可以避免单独配置Ruby和ruby-sass,但是我一直没察觉这为后面埋下了无数个地雷,每一次迁移环境或者给新同事搭建环境时,都会遇到node-sass安装失败,刚开始连VPN就好了,后来Node的版本升级越来越频繁,每一次更换Node版本都需要执行npm rebuild node-sass重新编译node-sass, 再后来,团队使用Jenkins自动化部署时同样的问题再次出现,Jenkins服务器不可能为了安装个node-sass单独连VPN,于是只能寻找解决方法。

仔细看了NPM上了两个类似的库的说明文档:grunt-sassgrunt-contrib-sass, 对比了grunt-sassgrunt-contrib-sass后,决定改用后者,下面是我的一些对比结果

grunt-sass:

  1. 依赖node-sass库,不需要另外安装Ruby和Sass编译工具;
  2. 安装时需要翻墙;
  3. 每次更新Node版本时,需要重新编译node-sass(喜欢使用nvm的同学简直了);

grunt-contrib-sass:

  1. 依赖 Rubyruby-sass,(配置一劳永逸);
  2. 有时候gem install sass安装时有点慢,但使用淘宝的RubyGems镜像可以改善;

而Webpack的用户同样有一些替代的Loader可以使用,一般都直接使用sass-loader,如果你同样遇到我所遇到的那些问题,并且感到深深的不爽,那么可以试试用这两个库:

  1. sass-loader-china:据说是专为国情优化过的;
  2. ruby-sass-loader:这是一个使用原生Ruby和ruby-sass的Loader, 需要先配置Ruby环境并安装ruby-sass;

大概步骤 #

Grunt #

  1. 卸载grunt-sass: cd ${YourProjectDir} && npm uninstall grunt-sass --save-dev;
  2. 安装Ruby: Mac已经自带了Ruby, Linux和Windows请自行Google;
  3. 安装ruby-sass: gem install sass, 如果Mac或Linux有遇到权限错误,请使用sudo gem install sass安装;
  4. 安装grunt-contrib-sass: npm install grunt-contrib-sass;
  5. 已完成,Gruntfile中Sass任务的配置不用修改,两个库的配置属性是一样的;

Webpack #

  1. 卸载sass-loader: npm uninstall sass-loader --save-dev;
  2. 安装Ruby: Mac已经自带了Ruby, Linux和Windows请自行Google;
  3. 安装ruby-sass: gem install sass, 如果Mac或Linux有遇到权限错误,请使用sudo gem install sass安装;
  4. 安装sass-loader-chinaruby-sass-loader,这两个根据你自己的爱好任选其一;
  5. 根据步骤4选择的Loader, 对于的修改您项目中webpack.config.js的sass-loader的配置;