想要轻松的安装 node-sass 可能算是一种运气问题,但大部分时间你的运气都不会太好
# 前言
从 2006 年诞生至今,sass 经历了重构和多种语言实现,sass 表示我太累了...
但正如 sass 官网所说,sass 的这些经历不影响 sass 第一的地位:
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
关于 sass 更多的了解和学习,文末会放几个参考链接,本文就不赘述了
# node-sass
在 github 上,sass 开源组织拥有很多 sass 的各语言实现,对于 npm er 来说,node-sass 应该再熟悉不过了
网络问题无法下载镜像,本机环境问题都有可能导致安装依赖或者运行出现问题
而解决方法也可以很简单,切换为镜像源:
npm install --registry=https://registry.npm.taobao.org
但这种膈应总是会在脑海中一直念叨着 node-sass 的不好...
# dart-sass
dart-sass 是 Sass 的主要实现版本,这意味着它集成新功能要早于任何其它的实现版本。Dart Sass 速度快、易于安装,并且 可以被编译成纯 JavaScript 代码,这使得它很容易集成到现代 web 的开发流程中。
对于 dart-sass 的介绍本文也不介绍太多,只说几个优于 node-sass 的点:
易于安装,仅需正常的 npm install 即可,无需配置什么镜像源
现在已经绝大部分兼容 node-sass ,在将来会完全兼容,不会有太多迁移成本
sass 官方目前主力推 dart-sass ,最新的特性都会先在 dart-sass 上面实现
node-sass 在 Windows 上构建需要 python2 和 Visual Studio,而且 python2 如果和 python3 共存,还需要临时修改环境变量,配置较麻烦;Mac 似乎也需要 XCode 的样子,dart-sass 看起来是一个纯js实现,无需进行二进制编译,安装如丝般顺滑(除了不兼容 /deep/ 的写法,这很容易修正) 参考
# 需要注意
- node-sass 支持 NodeJS 0.10.x 以上,dart-sass 只支持 NodeJS 8.9.x 以上
# 迁移
从 node-sass 迁移到 dart-sass 只需要做很少的工作:
- 卸载 node-sass
npm uninstall node-sass
- 安装 dart-sass
npm install sass
- 检查兼容性代码
- dart-sass 不支持 /deep/ 语法,可以使用 ::v-deep 代替
- sass-loader 的配置(如果有的话)
build/utils.js
generateLoaders方法
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
// to use Dart Sass
sass: generateLoaders("sass", {
indentedSyntax: true,
implementation: require("sass")
}),
scss: generateLoaders("sass",{
implementation: require("sass")
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
用上 dart-sass 后,再也不用担心 npm install node-sass 报错啦
# 参考
SASS用法指南 - 阮一峰 当然这个教程你仅需要学习语法无需真的安装 Ruby ...