記錄一下安裝node-sass的過程.關于CSS是不是一門編程語言,這里不討論,但是它沒有變量 語句 函數(shù)(反正我覺得他不是編程語言).于是程序員們發(fā)明了CSS預處理器(css preprocessor),它是一種專門的編程語言,可以使用你會的基本的編程知識進行編程,然后再轉(zhuǎn)化成css文件.
12月更新
本次重新安裝node-sass是因為電腦換了固態(tài)重裝系統(tǒng)了，在新系統(tǒng)下很長時間內(nèi)沒有用過sass，一切都是那個風平浪靜，直到11月的最后一晚，想折騰一下博客，看到一個好看的主題，這個主題需要安裝兩個插件，其中有一個需要node-sass的加持。
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save #就是這貨
不出意外的，國內(nèi)不采取特殊途徑，hexo-renderer-sass安裝報錯，根據(jù)log日志，很容易的發(fā)現(xiàn)，他需node-sass@4.10.0支持，但是下載失敗。
-
解決方案1：先在
global下安裝node-sass- 重裝后我全是采用的
nvm管理的node版本，所有的包都在.nvm目錄下，避免權限不夠的錯誤(或者采取分割線以下的阮一峰老師的方法避免包權限的問題)。 - 配置
.npmrc，先touch ~/.npmrc。這次直接采取node-sass的官方推薦的方式，npm install -g mirror-config-china --registry=http://registry.npm.taobao.org，所有的國內(nèi)有問題的包全都避免了。 - 結(jié)果竟然無法下載，
log日志提醒我可能是代理的問題，可能是我的FQ的系統(tǒng)代理有問題，去控制臺一看，果然SOCKETS 有個錯誤，嘗試使用npm添加代理的方式，均告失敗，畢竟以后也不能總靠代理過日子，這個方式不可取。這次想找個一勞永逸的方式徹底解決這個垃圾問題。 - 終于發(fā)現(xiàn)了，直接使用下載好的
Realease包去安裝，先去node-sass主頁下載系統(tǒng)需要的類型，這個完全可以解決系統(tǒng)不同的問題，很具用普適性。 - 到底你的系統(tǒng)需要那個具體的包呢，這個就是最關鍵的了，我的方式是：先安裝，失敗后會提示你
哪個版本的node包無法下載，這個時候再去下載這個包。通過如下代碼去安裝：
npm i -g node-sass@4.9.3 --sass_binary_path=/home/wsl/Downloads/chromeDownloads/linux-x64-64_binding.node # path需要替換成你系統(tǒng)的那個包名字But我以為下載成功了，就萬事大吉了呢，發(fā)現(xiàn)我真是太天真了。安裝完后第一件事就是檢驗安裝的包能不能用，node-sass -v一下，最不濟出現(xiàn)個node-sass not found這種類似的初級錯誤啊，結(jié)果報了個無語的錯誤。找不到vendor目錄這個目錄是
node-sass規(guī)定的node-sass-package.json為啥沒有這個目錄呢，因為通過 我采用的是設置本地下載路徑，沒有通過網(wǎng)上的下載。所以需要手動建立一個
vendor目錄（issues里面通過npm rebulid node-sass可以解決，但是我沒生效），接著會報第二個新錯誤，這就很合理了，報錯一點不可怕，能看懂并解決掉就很是進步。 - 重裝后我全是采用的
新的錯誤是需要binding.node文件，剛才建立的vendor是個空目錄所以找不到，在其內(nèi)部建立二級目錄，并把剛才下載的包改名為binding.node，即vendor/linux-X64-64/binding.node
至此，本地安裝node-sass完畢，以后可以隨便玩node-sass了，管你能不能翻墻，能不能設置鏡像。
- 本來以為全局安裝完畢就可以在博客目錄下直接安裝
hexo-renderer-sass，竟然還是報錯。沒辦法，在newBlog目錄下又按照上述的方法安裝了一個node-sass@4.10.0，因為hexo-render-sass需要4.10.0版本。最后終于成功了。
分割線以下為傳統(tǒng)解決方法，尤其針對Linux用戶
介紹
主流的CSS預處理器有8種,我們今天介紹sass.它的官網(wǎng),不過需要安裝ruby.
- 不想安ruby,那就借助node安裝
node-sass吧.github主頁 - 本人是
deepin Linux 15.5版本
安裝
- 由于node-sass會去github主頁下載binding-node,然后又去亞馬遜去下載,所以國內(nèi)因為一些不可抗力無法下載.簡單的進行如下的設置,都是初學者,我就不用命令的形式寫了,下面直接寫上內(nèi)容.基本的命令用多了也就會了.
- 在主目錄下建立一個.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
問題出現(xiàn)
第一個錯誤
- 用了上述的命令,我第一次就報錯,Error顯示說權限不夠,我果斷用了
sudo npm i -g node-sass
- 恩,然后就是無休止的錯誤,ctrl+c終止后,發(fā)現(xiàn)node_modules里面有node-sass,但是明顯不能用.去github的issue上搜,大神都是用了
npm rebulid node-sass
然而成功是屬于其他人的.
- 我試了一下,又是報錯, 還是權限不夠,我又加了
sudo. - 恩,又是報錯.此時我很煩,你說沒權限,我加了權限你又報錯,這個死循環(huán).......
- 沒辦法,生活還要繼續(xù),又去stackoverflow和github上搜,在node-sass的項目的
Troubleshooting上發(fā)現(xiàn)了問題所在,如下是Linux部分的官方文檔
Linux
This can happen if you are install node-sass as
root, or globally withsudo. This is a security feature ofnpm. You should always avoid runningnpmassudobecause 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-permflag with npm install i.e.$ sudo npm install --unsafe-perm -g node-sassIf this didn't solve your problem please open an issue with the output from our debugging script.
- 文檔說: 當你用root角色或者全局使用sudo命令安裝的時候,就會發(fā)生這個錯誤.(-媽個雞,我就是全局安裝node-sass啊),不過人家說了,這是npm的安全特性.(-你牛你說啥都行),你應該總是避免使用sudo去執(zhí)行npm,因為安裝腳本會發(fā)生意想不到的致命錯誤(-確實意想不到,以前我都是sudo安裝模塊,就這次栽了,不過你倒是說咋解決啊),請左轉(zhuǎn)去npm的官方文檔(- 這是重點,解決方法就在這里),如果你非要用sudo,用下面的命令吧..............如果這些仍沒有解決你的問題,請看了我們的debugging腳本里面的解決方法在開啟一個新的issue吧(如果大家還有和我不一樣的錯誤,這里有很多解決方法)our debugging script.
- 好了,翻譯完了,咱們?nèi)pm的第三章去看看咋解決.
- 第三章寫的寫的很明白.
- 如何避免權限錯誤
下面是文檔原文
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/底下的內(nèi)容了,你或者可以改變目錄的權限 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-globalConfigure 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:$PATHBack on the command line, update your system variables:
source ~/.profileInstead 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
- 官方確實夠詳細,也能用,你不想麻煩,就在環(huán)境變量里面
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
- 很遺憾,舊目錄的沒刪成功,不過新目錄的能用就行........................
安裝小總結(jié)
1. 一定不要用sudo安裝,先手動改npm的目錄
2. 更改.npmrc 和 .bashrc
3. npm i -g node-sass
4. 英語多學點,文檔多看點,命令行多用點.
node-sass的簡單使用
- 它的使用方法和ruby的sass有一點小區(qū)別
node-sass -wr scss -o css
