Hbuilder如何配置less及重新配置node.js的安装路径

(最近在开始学习bootstrap框架,然后需要用到.less文件。)

第一步

需要安装 nodejs,安装路径:https://nodejs.org/en/ (一般是下载LTS版本的,比较稳定)

hbuilder怎么执行python hbuilder怎么运行node_css

第二步

安装完成后,打开命令行页面

输入 node -v和npm -v,如下表示安装成功

hbuilder怎么执行python hbuilder怎么运行node_命令行_02

第三步

需要重新配置下载package的安装路径(因为默认的安装路径是在你的C盘隐藏文件夹中AppData,可能会出现调用错误的问题,建议是重新配置下,因为我的就是不配置就不可以)

1.先在你安装的node.js下的根目录创建两个文件夹

node_cache和node_global

hbuilder怎么执行python hbuilder怎么运行node_hbuilder怎么执行python_03

同时需要再node_global里面创建一个node_modules文件夹

hbuilder怎么执行python hbuilder怎么运行node_命令行_04


3.在E:\applications1\node-path\node_modules\npm目录下,找到.npmrc或者npmrc文件夹,修改.npmrc的内容,把你创建的路径添加进去

hbuilder怎么执行python hbuilder怎么运行node_node.js_05

4.可能需要配置你的环境

打开环境变量,把你创建的node_global下的node_modules的路径添加到你的path后面

hbuilder怎么执行python hbuilder怎么运行node_css_06

5.然后打开你的命令行

输入如下内容

hbuilder怎么执行python hbuilder怎么运行node_命令行_07

并且进行验证

hbuilder怎么执行python hbuilder怎么运行node_css_08


表示你的路径修改成功

第四步

下载less,输入 npm i less -g

就把内容下载到你刚刚配置的路径下,然后再输入 npm i less-plugin-functions -g 这个要再联网的状态下输入

hbuilder怎么执行python hbuilder怎么运行node_hbuilder怎么执行python_09


这样就表示你安装成功。

第五步

找到你的less安装路径下的lessc.cmd文件的路径

hbuilder怎么执行python hbuilder怎么运行node_node.js_10

然后打开Hbuilder–>工具–>预编译器设置–>.less(没有.less可以新建一个的),然后对此进行编辑

如下图所示

hbuilder怎么执行python hbuilder怎么运行node_css_11


触发命令行地址就是你刚刚找到的地址,直接点确定。

编辑你的less文件,就会自动生成一个对应的index.css,表示成功