摘要：此后，全局安裝的模塊都會(huì)安裝在這個(gè)子目錄中，也會(huì)到目錄去尋找命令。最后，將這個(gè)路徑在文件或文件中加入變量。

記錄一下安裝node-sass的過程.關(guān)于CSS是不是一門編程語言,這里不討論,但是它沒有變量 語句 函數(shù)(反正我覺得他不是編程語言).于是程序員們發(fā)明了CSS預(yù)處理器(css preprocessor),它是一種專門的編程語言,可以使用你會(huì)的基本的編程知識進(jìn)行編程,然后再轉(zhuǎn)化成css文件.

主流的CSS預(yù)處理器有8種,我們今天介紹sass.它的官網(wǎng),不過需要安裝ruby.

不想安ruby,那就借助node安裝node-sass吧.github主頁

本人是deepin Linux 15.5版本

由于node-sass會(huì)去github主頁下載binding-node,然后又去亞馬遜去下載,所以國內(nèi)因?yàn)橐恍┎豢煽沽o法下載.簡單的進(jìn)行如下的設(shè)置,都是初學(xué)者,我就不用命令的形式寫了,下面直接寫上內(nèi)容.基本的命令用多了也就會(huì)了.

在主目錄下建立一個(gè).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/
//順序好像會(huì)有影響,我一開始不是這個(gè)順序,后來改成這個(gè),能安裝成功

還必須在主目錄的.bashrc下添加

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

好了,按理說可以用如下命令正常安裝了,但是出問題了.

npm i -g node-sass

用了上述的命令,我第一次就報(bào)錯(cuò),Error顯示說權(quán)限不夠,我果斷用了

sudo npm i  -g node-sass

恩,然后就是無休止的錯(cuò)誤,ctrl+c終止后,發(fā)現(xiàn)node_modules里面有node-sass,但是明顯不能用.去github的issue上搜,大神都是用了

npm rebulid node-sass

然而成功是屬于其他人的.

我試了一下,又是報(bào)錯(cuò), 還是權(quán)限不夠,我又加了sudo.

恩,又是報(bào)錯(cuò).此時(shí)我很煩,你說沒權(quán)限,我加了權(quán)限你又報(bào)錯(cuò),這個(gè)死循環(huán).......

沒辦法,生活還要繼續(xù),又去stackoverflow和github上搜,在node-sass的項(xiàng)目的Troubleshooting上發(fā)現(xiàn)了問題所在,如下是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.

文檔說: 當(dāng)你用root角色或者全局使用sudo命令安裝的時(shí)候,就會(huì)發(fā)生這個(gè)錯(cuò)誤.(-媽個(gè)雞,我就是全局安裝node-sass啊),不過人家說了,這是npm的安全特性.(-你牛你說啥都行),你應(yīng)該總是避免使用sudo去執(zhí)行npm,因?yàn)榘惭b腳本會(huì)發(fā)生意想不到的致命錯(cuò)誤(-確實(shí)意想不到,以前我都是sudo安裝模塊,就這次栽了,不過你倒是說咋解決啊),請左轉(zhuǎn)去npm的官方文檔(- 這是重點(diǎn),解決方法就在這里),如果你非要用sudo,用下面的命令吧..............如果這些仍沒有解決你的問題,請看了我們的debugging腳本里面的解決方法在開啟一個(gè)新的issue吧(如果大家還有和我不一樣的錯(cuò)誤,這里有很多解決方法)our debugging script.

好了,翻譯完了,咱們?nèi)pm的第三章去看看咋解決.

第三章寫的寫的很明白.

如何避免權(quán)限錯(cuò)誤

下面是文檔原文

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.

它說:如果你嘗試安裝一個(gè)全局的包,遇到了權(quán)限的錯(cuò)誤,應(yīng)該讀讀這一章.如果npm被安裝的時(shí)候你改變了npm的目錄,這個(gè)錯(cuò)誤就會(huì)被避免(- 言下之意,就是讓你改目錄,就可以避免不能操作/usr/local/底下的內(nèi)容了,你或者可以改變目錄的權(quán)限 chmod [mode] dir,效果應(yīng)該一樣的,我沒試過,而且官方也沒說),要想做到這個(gè),要么用版本管理工具重裝npm(- 官方推薦的),要么就手動(dòng)改變npm的默認(rèn)目錄(我用的這個(gè)).

好了,翻譯完了,如果你想用官方推薦的方法就用版本管理工具重裝npm,就去看文檔的第二章

官方推薦用nvm,我以前誤打誤撞安了一個(gè)TJ大神(尤雨溪的偶像)的n模塊( 不會(huì)用,就會(huì)升級,好尷尬啊)

還有一個(gè)

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

如果你的npm版本是5.2以上,可以用npx(又是好尷尬,我有npx,也不會(huì)用.....)

還有特別火的小貓yarn,快30000的star了(不過我沒用......)

恩,前端的世界很精彩啊.

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

官方確實(shí)夠詳細(xì),也能用,你不想麻煩,就在環(huán)境變量里面NPM_CONFIG_PREFIX=~/.npm-global

我試過這個(gè)方法,不過建立的.npm-global隱藏得太深了,ctrl+H都看不到它,我就采用了阮一峰大神的方法,方法還是要用大神的博客的方法或者官方的啊.

首先，在主目錄下新建配置文件.npmrc，然后在該文件中將prefix變量定義到主目錄下面。

prefix = /home/yourUsername/npm

然后在主目錄下新建npm子目錄。

mkdir ~/npm

此后，全局安裝的模塊都會(huì)安裝在這個(gè)子目錄中，npm也會(huì)到~/npm/bin目錄去尋找命令。
最后，將這個(gè)路徑在.bash_profile文件（或.bashrc文件）中加入PATH變量。

export PATH=~/npm/bin:$PATH

做完這個(gè)之后,全局卸載不能用的node-sass,再npm i -g node-sass

# 卸載全局模塊
$ npm uninstall [package name] -global

很遺憾,舊目錄的沒刪成功,不過新目錄的能用就行........................

1. 一定不要用sudo安裝,先手動(dòng)改npm的目錄
2. 更改.npmrc 和 .bashrc
3. npm i -g node-sass
4. 英語多學(xué)點(diǎn),文檔多看點(diǎn),命令行多用點(diǎn).

它的使用方法和ruby的sass有一點(diǎn)小區(qū)別

node-sass -wr scss -o css

官方使用手冊

阮一峰教程