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