Linux下node-sass安装失败的解决方法与简单使用

记录一下安装node-sass的过程.关于CSS是否是一门编程语言,这里不讨论,可是它没有变量 语句 函数(反正我以为他不是编程语言).因而程序员们发明了CSS预处理器(css preprocessor),它是一种专门的编程语言,可使用你会的基本的编程知识进行编程,而后再转化成css文件.

介绍

主流的CSS预处理器有8种,咱们今天介绍sass.它的官网,不过须要安装ruby.

• 不想安ruby,那就借助node安装node-sass吧.github主页
• 本人是deepin Linux 15.5版本

安装

• 因为node-sass会去github主页下载binding-node,而后又去亚马逊去下载,因此国内由于一些不可抗力没法下载.简单的进行以下的设置,都是初学者,我就不用命令的形式写了,下面直接写上内容.基本的命令用多了也就会了.

  • 在主目录下创建一个.npmrc的文件,在里面加上

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org/
//顺序好像会有影响,我一开始不是这个顺序,后来改为这个,能安装成功

• 还必须在主目录的.bashrc下添加

export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"

• 好了,按理说能够用以下命令正常安装了,可是出问题了.

npm i -g node-sass

问题出现

第一个错误

1. 用了上述的命令,我第一次就报错,Error显示说权限不够,我果断用了

sudo npm i  -g node-sass

• 恩,而后就是无休止的错误,ctrl+c终止后,发现node_modules里面有node-sass,可是明显不能用.去github的issue上搜,大神都是用了

npm rebulid node-sass

然而成功是属于其余人的.

• 我试了一下,又是报错, 仍是权限不够,我又加了sudo.
• 恩,又是报错.此时我很烦,你说没权限,我加了权限你又报错,这个死循环.......
• 没办法,生活还要继续,又去stackoverflow和github上搜,在node-sass的项目的Troubleshooting上发现了问题所在,以下是Linux部分的官方文档

Linux

This can happen if you are install node-sass as root, or globally with sudo. This is a security feature of npm. You should always avoid running npm as sudo because install scripts can be unintentionally malicious. Please check npm documentation on fixing permissions.
If you must however, you can work around this error by using the --unsafe-perm flag with npm install i.e.

$ sudo npm install --unsafe-perm -g node-sass

If this didn't solve your problem please open an issue with the output from our debugging script.

• 文档说: 当你用root角色或者全局使用sudo命令安装的时候,就会发生这个错误.(-妈个鸡,我就是全局安装node-sass啊),不过人家说了,这是npm的安全特性.(-你牛你说啥都行),你应该老是避免使用sudo去执行npm,由于安装脚本会发生意想不到的致命错误(-确实意想不到,之前我都是sudo安装模块,就此次栽了,不过你却是说咋解决啊),请左转去npm的官方文档(- 这是重点,解决方法就在这里),若是你非要用sudo,用下面的命令吧..............若是这些仍没有解决你的问题,请看了咱们的debugging脚本里面的解决方法在开启一个新的issue吧(若是你们还有和我不同的错误,这里有不少解决方法)our debugging script.
• 好了,翻译完了,我们去npm的第三章去看看咋解决.
• 第三章写的写的很明白.

1. 如何避免权限错误

下面是文档原文

If you see an EACCES error when you try to install a package globally, read this chapter. This error can be avoided if you change the directory where npm is installed. To do this, either:
Reinstall npm with a version manager (recommended),
or
Change npm's default directory manually.

它说:若是你尝试安装一个全局的包,遇到了权限的错误,应该读读这一章.若是npm被安装的时候你改变了npm的目录,这个错误就会被避免(- 言下之意,就是让你改目录,就能够避免不能操做/usr/local/底下的内容了,你或者能够改变目录的权限 chmod [mode] dir,效果应该同样的,我没试过,并且官方也没说),要想作到这个,要么用版本管理工具重装npm(- 官方推荐的),要么就手动改变npm的默认目录(我用的这个).

• 好了,翻译完了,若是你想用官方推荐的方法就用版本管理工具重装npm,就去看文档的第二章

版本管理工具

• 官方推荐用nvm,我之前误打误撞安了一个TJ大神(尤雨溪的偶像)的n模块( 不会用,就会升级,好尴尬啊)
• 还有一个

If you are using npm version 5.2 or greater, explore tools such as  npx to circumvent permissions issues.

若是你的npm版本是5.2以上,能够用npx(又是好尴尬,我有npx,也不会用.....)

• 还有特别火的小猫yarn,快30000的star了(不过我没用......)
• 恩,前端的世界很精彩啊.

手动更改npm目录

Back-up your computer before moving forward.
Make a directory for global installations:

mkdir ~/.npm-global

Configure npm to use the new directory path:

npm config set prefix '~/.npm-global'

Open or create a ~/.profile file and add this line:

export PATH=~/.npm-global/bin:$PATH

Back on the command line, update your system variables:

source ~/.profile

Instead of steps 2-4, you can use the corresponding ENV variable (e.g. if you don't want to modify ~/.profile):

NPM_CONFIG_PREFIX=~/.npm-global

• 官方确实够详细,也能用,你不想麻烦,就在环境变量里面NPM_CONFIG_PREFIX=~/.npm-global
• 我试过这个方法,不过创建的.npm-global隐藏得太深了,ctrl+H都看不到它,我就采用了阮一峰大神的方法,方法仍是要用大神的博客的方法或者官方的啊.

首先，在主目录下新建配置文件.npmrc，而后在该文件中将prefix变量定义到主目录下面。

prefix = /home/yourUsername/npm

而后在主目录下新建npm子目录。

mkdir ~/npm

此后，全局安装的模块都会安装在这个子目录中，npm也会到~/npm/bin目录去寻找命令。
最后，将这个路径在.bash_profile文件（或.bashrc文件）中加入PATH变量。

export PATH=~/npm/bin:$PATH

• 作完这个以后,全局卸载不能用的node-sass,再npm i -g node-sass

# 卸载全局模块
$ npm uninstall [package name] -global

• 很遗憾,旧目录的没删成功,不过新目录的能用就行........................

安装小总结

---

1. 必定不要用sudo安装,先手动改npm的目录
2. 更改.npmrc 和 .bashrc
3. npm i -g node-sass
4. 英语多学点,文档多看点,命令行多用点.

---

node-sass的简单使用

• 它的使用方法和ruby的sass有一点小区别

node-sass -wr scss -o css

• 官方使用手册
• 阮一峰教程

加油啊,sass