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