WebStorm怎么设置实现自动编译less文件

有些人写less文件习惯用Koala进行编译,如果用PhpStorm的话就没必要使用Koala,简单设置一下就可以实现自动编译了。方法如下:

首先,需要保证电脑安装过Node.js,下载地址:https://nodejs.org/en/

安装Node.js的时候会自动安装npm

WebStorm怎么设置实现自动编译less文件 HTML笔记 第1张

然后,安装lessc模块

打开cmd控制台

输入下面一行npm命令,安装less模块:-g是全局安装,如果不加会安装在当前目录。

npm install less -g

WebStorm怎么设置实现自动编译less文件 HTML笔记 第2张

安装less-plugin-clean-css插件(less的插件,用于压缩代码)

npm install less-plugin-clean-css -g

WebStorm怎么设置实现自动编译less文件 HTML笔记 第3张

PHPStorm 点击File>Settings>Tools>File Watcher 添加less自动编译参数

WebStorm怎么设置实现自动编译less文件 HTML笔记 第4张

PhpStorm会自动识别lessc.cmd文件,如果不能识别,手动找到npm目录的lessc.cmd文件即可,我这里添加的--clean-css参数会自动代码压缩,也可以不加,就不会自动压缩代码了。

WebStorm怎么设置实现自动编译less文件 HTML笔记 第5张

这样在项目里编辑less文件时,会自动时时生成css文件了

效果如下:

WebStorm怎么设置实现自动编译less文件 HTML笔记 第6张

未经允许不得转载:Web前端开发资源网 » WebStorm怎么设置实现自动编译less文件

推荐阅读:

Bootstrap滚动监听不用offset实现向下偏移

Jetbrains系列激活补丁JetbrainsCrack-2.8更新

使用swiper的coverflowEffect遇到的几个问题

一个导航栏tab切换的方法 siblings()

overflow的一些小细节笔记

赞 (3)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)