node-sass是我们开发中很常见的依赖包,也是安装时间冗长和最常见到报错的依赖。
安装node-sass失败原因有很多种,我们在说失败原因之前,先来分析一下node-sass的安装过程(以下node版本为v10.15.3):
PS D:\demo> npm i node-sass
// 从npm源安装到node_modules
> node-sass@4.13.0 install D:\demo\node_modules\node-sass
> node scripts/install.js
// 下载binding.node
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/win32-x64-64_binding.node
Download complete .] - :
Binary saved to D:\demo\node_modules\node-sass\vendor\win32-x64-64\binding.node
// 缓存binding.node
Caching binary to C:\Users\leepi\AppData\Roaming\npm-cache\node-sass\4.13.0\win32-x64-64_binding.node
> node-sass@4.13.0 postinstall D:\demo\node_modules\node-sass
> node scripts/build.js
Binary found at D:\demo\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
// 写package-lock.json
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN demo@1.0.0 No description
npm WARN demo@1.0.0 No repository field.
+ node-sass@4.13.0
added 174 packages from 138 contributors and audited 529 packages in 24.379s
found 0 vulnerabilities
我们可以看到,安装node-sass有几个步骤:
由此看到,实际上node-sass依赖了一个二进制文件binding.node,从npm源安装完本体后还会从github下载binding.node。
因此安装node-sass相关的失败原因有以下几种:
由于众所周知的国内网络环境,从国内安装官方源的依赖包会很慢。可以将npm源设置成国内镜像源(如淘宝npm):
npm config set registry https://registry.npm.taobao.org
或者通过.npmrc文件设置:
// .npmrc
registry=https://registry.npm.taobao.org/
node-sass除了npm部分的代码,还会下载二进制文件binding.node,默认源是github,国内访问较慢,特殊时期甚至无法访问。我们也可以将其改成国内源:
// linux、mac 下
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
// window 下
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass
或者通过.npmrc文件设置:
// .npmrc
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
有类似问题的还有chromedriver,phantomjs,electron等常见依赖包,我们可以一并写到.npmrc中:
// .npmrc
sass_binary_site=https://npm.taobao.org/mirrors/node-sass
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs
electron_mirror=https://npm.taobao.org/mirrors/electron
node-sass版本兼容性并不好,老项目中依赖的node-sass很可能已经不兼容新的node,对应版本兼容如下(或参考官方仓库):
NodeJS | Minimum node-sass version | Node Module |
---|---|---|
Node 13 | 4.13+ | 79 |
Node 12 | 4.12+ | 72 |
Node 11 | 4.10+ | 67 |
Node 10 | 4.9+ | 64 |
Node 8 | 4.5.3+ | 57 |
本文开头的安装例子中,binding.node的版本是v4.13.0/win32-x64-64_binding.node,可以看到,里面包括node-sass版本号v4.13.0,平台win32,架构x64,以及Node Module的版本64。Node Module是node的一个模块,其版本号可以在进程process.versions中查到:
PS D:\demo> node
> console.log(process.versions);
{ http_parser: '2.8.0',
node: '10.15.3',
v8: '6.8.275.32-node.51',
uv: '1.23.2',
zlib: '1.2.11',
ares: '1.15.0',
modules: '64',
nghttp2: '1.34.0',
napi: '3',
openssl: '1.1.0j',
icu: '62.1',
unicode: '11.0',
cldr: '33.1',
tz: '2018e' }
undefined
>
如上显示,node10.15.3对应的module版本为64。
假如node-sass与node的版本不兼容,就会找不到对应的binding.node而报错,例如你的node是10.15.3,装node-sass4.6.1,则会尝试安装v4.6.1/win32-x64-64_binding.node,但这个版本的binding.node是不存在的。
此时改node-sass或node的版本即可。
假如本地node版本改了,或在不同机器上运行,node版本不一致,会报类似错误:
Found bindings for the following environments:
- Windows 64-bit with Node.js 6.x
这是因为原有binding.node缓存跟现node版本不一致。按提示npm rebuild node-sass或清除缓存重新安装即可。
安装失败后重新安装,有可能无权限删除已安装内容,此时npm uninstall node-sass或手动删掉原目录后再安装即可。
假如拉取binding.node失败,node-sass会尝试在本地编译binding.node,过程就需要python。假如你遇到前面几种情况解决了,实际上也不会出现在本地构建的情况了,我们就不谈这种失败中失败的情况吧 :-)
Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言 ,除了Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。 这篇文章关于Sass快速入门学习笔记。
Sass是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这篇文章介绍:基本语法(变量、计算功能、嵌套、注释、继承、混合、颜色函数、引入外部文件)、高级用法(函数 function、if条件语句、循环语句)
本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。
webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要安装sass的依赖包
很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:
项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less;你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。
sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用
我也无意中(至少在开始时)从我的代码库中删除了所有Sass的痕迹。这不是我打算做的事情,但是我看到我的旧Sass文件的次数越多,我就会更加地质疑它是否为我的网站增加了价值,或者只是增加了额外的复杂性和依赖性
这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?
Scss 文档太多了,但还是耐心看完了,总结自己常用的一些语法。Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!