WebStrom配置Less,实现实时编译

配置环境

1、安装webstrom

2、安装nodeJShttp://nodejs.cn/download/选择windows系统(.msi)下载完成后直接安装

win+r打开cmd命令行,输入node -v 显示node版本表示安装成功。

3、安装less

      ①win+r打开cmd命令行工具,输入npm install -g less 安装less,

      ②可能错误:出现多个npm err、node err

               解决办法:尝试输入npm config set strict-ssl false,问题解决再恢复:npm config set strict-ssl true

       ③安装完成后,注意提示路径,找到完成后提示的路径,复制路径:"users\Administrator\AppData\Roaming\npm\lessc.cmd"

4、配置webstorm

file>settings>Tools>file Watchers>

找到右边的绿色的+,选择Less文件,弹出设置菜单

配置Less编译菜单,设置Program地址:安装less第三步复制的路径users\Administrator\AppData\Roaming\npm\lessc.cmd ,其余选项不用更改

做完配置后,在webstorm所在项目中创建Less文件

可能错误,编辑器控制台报错,提示node+乱码,可能node没有安装成功,或者安装成功后系统配置没有完全,可以尝试重启电脑若还报错重装nodeJS

如果没有错误,则可以看到Less文件创建后提示有下级文件夹,生成同名css文件。每次更改less文件,css文件实时编译,同步更改。

然后就可以快乐的使用Less了     ~~O(∩_∩)O~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • [目录] Less为什么会出现? 学习Less的网站 Less的安装环境离线的安装方式在线的安装方式 less转化...
    顽皮的雪狐七七阅读 15,473评论 5 42
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,392评论 0 13
  • 在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识。首先当然是安装nodejs,通过nodejs的npm全...
    amazing_bing阅读 1,072评论 0 1
  • 1,安装nodeJs1.1、说明:gulp是基于nodeJS,理所当然需要安装nodeJS;1.2、安装:打开no...
    LIsPeri阅读 281评论 0 2
  • 六點半,按平時的點自然醒了,本想繼續睡,翻來覆去卻怎麼也睡不著了,拿起手機卻又不知道幹些什麽,過去幾個月的點滴如同...
    超级等待的季节阅读 361评论 0 1