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

    原文作者:codevvvv9
    原文地址: https://segmentfault.com/a/1190000012912618
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞