less安装及在编辑器中使用

引入less方式:4种

1直接引入less文件

2.koala编译器  下载编译器网址  http://koala-app.com/

用编译器

3.用node服务器npm

    3.1先下载安装 node

   3.2查看node是否安装成功:

   less安装及在编辑器中使用

注意:如果报错则需要修改环境变量,百度查找即可

less安装及在编辑器中使用

3.3使用npm管理包工具安装less

其中-g代表全局安装

npm install less -g

less安装及在编辑器中使用

这样应该代表成功了

less安装及在编辑器中使用

3.4在cmd中进入项目所在路径

d:  切到d盘

cd \xx\xx 切到指定项目文件夹

lessc xx.less > xx.css  less文件编译成css文件


下边以F:\泰牛程序员\实验案例--张雨晴\miaov--html,css\h5远程班\less中的less1.less为例

less安装及在编辑器中使用

       

4.在编辑器中实时编译 -- 常用

前提:安装了node,并且用npm less -g的方式将less安装好

打开webstorm编辑器

file-- setting -- tools -- file wathers

less安装及在编辑器中使用

点击less以后弹出配置窗口

less安装及在编辑器中使用

修改画框的地方即可。路径是存放lessc.cmd文件的地方(有的时候AppData文件夹可能会隐藏。设置显示即可)点击确定。

less安装及在编辑器中使用

less安装及在编辑器中使用