使用 react 到现在, 让人头疼的一个问题是安装 node-sass. 其实导致问题的根源在于安装过程需要下载一个 binding.node 文件, 而因 "你懂的" 原因, 访问不了这个地址. 根据这个原因, 总结了以下几个解决方案:
翻墙
这没什么好说的了, 这是最轻松最彪悍的解决方案. 只要能翻墙直接一个 npm i 命令就完事了, 什么都不必去操心. 至于怎么翻墙............
使用 cnpm
cnpm 是一个强悍的工具, 几乎能解决所有 npm 安装第三方包时遇到的问题. 执行如下命令即可:
- npm install
- npm rm node-sass
- cnpm install node-sass
- npm install
但是我们在使用 cnpm 时也遇到了一个坑, 在 ubuntu14.04 打出来的包运行报错, 不用 cnpm 下载居然就不会有这问题, 由于没有时间, 没有详细去了解原因是什么. 如果你是 Windows 开发而使用 Linux 环境打包或运行, 可能会碰到这个问题.
下载后编译
实际上为了得到 binding.node, 是可以直接从 github 上把源码下载下来之后再编译出来的, node-sass 自己也会这样做, 但是编译要依赖其他工具. 在各种发行版的 linux 下还好, 几乎所有需要的环境 (python 等) 都是预安装的, 如果是 root 权限直接 upm install 就搞定了, 所以有时候根本感觉不到这个问题. 在 windows 下就得花时间根据 install 时的错误日志了解还要安装什么.
linux 下遇到权限问题请执行:
npm i --unsafe -perm
附送一个最奇葩的坑
这是我用所有的开源工具遇到过最奇葩的坑. 我将一个文件命名为 "./dropDown.sCSS", 然后在 linux(是 ubuntu 14.04 其他发行版没时间去测试, windows 没这毛病)上用 webpack 打包, 打包过程没有任何异常, 但是放到服务器上运行打开某个页面就抛出无法找到 "./dropDown.scss" 的异常, 然后 node 直接停机了......... 我前后跟进了 2 天寻找问题的原因. 最后突发奇想将文件名由 dropDown.scss 修改为 pullDown.scss 后一切都好了. 我强烈的怀疑是某个临时工在 node-sass 里写了什么 "硬编码" 对字符串进行判断, 发现 "/drop[*]" 这样的前缀进行一些特殊处理. 在此记录下来.
来源: https://yq.aliyun.com/articles/623298