webStrom配置less编译,很方便

WebStorm2021-04-21 11:45:45130条
每次写项目都觉得内部配置less比<del>gulp</del>方便些,配置和大家分享一下!

1. 首先一定要安装并配置好 nodejs,下载地址:http://nodejs.org/ ;

2. 之后打开命令提示符(win+R)

node -v
npm -v

返回版本号就说明安装成功;

3. 安装less,命令提示符然后npm install less -g回车下载安装,安装会提示安装路径,记下该路径一会儿要用;

默认:C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc

4. 接下来配置webStrom的less设置,File -> Settings -> External Tools,点击左上角绿色的'+', 如图:

Program :是“node.exe”的实际路径。我的 -- D:\nodejs\node.exeParameters :是less的安装目录。我的 --

C:\Users\Adminis***\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$

Working directory :是nodejs的安装目录。我的 -- D:\Program Files\nodejs

轻轻点击OK;

5、新建一个index.less,在初次打开less文件的时候,在编辑界面的右上方会出现一个“Add watcher”链接,点进去,确定。

有的小可爱会存在需要手动设置 File -> Settings -> File Watchers 里面 Program 的问题,如图:


Arguments : 我的 -- $FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css --source-map ;

Output paths to refresh : 我的 -- $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map ;

然后以上就配置好啦~ 如果不起作用就重启webstrom试试哦~

6、实例:

我的index.css下面还有一个.map文件,这个不影响效果,如果不想要的话 --:

Arguments下删除 --source-map

Output paths to refresh下删除 :$FileNameWithoutExtension$.css.map ;

评论啦~
暂无评论,快来抢沙发吧!