WebStorm配置less编译wxss或css

文章目录


前言

使用WebStorm写微信小程序,wxss写着很麻烦,就想着用less,接下来是配置less编译


先下载安装less

javascript 复制代码
npm install -g less

less会安装在你当前目录下(以D盘为例),不过,可执行文件在这里:

可执行文件在这里(.bin目录,路径有圆点符号)

D:\node_modules.bin\lessc.cmd

打开webstorm的file watchers

具体目录: file(文件)->settings(设置)->Tools(工具)->file watchers

只需要改动以下三部分就行了(下方有图)

程序:

我的在D盘,一般都在项目的node_modules目录下的.bin\lessc(记住是.bin目录)

D:\project\huanjing-mp-new\node_modules.bin\lessc

实参:

javascript 复制代码
$FileName$ $FileNameWithoutExtension$.wxss

要刷新的输出路径

javascript 复制代码
$FileNameWithoutExtension$.wxss

以上三步没问题,就ok了,编译css也是同理,只是将wxss后缀名改为css就行。

成功

相关推荐
米奇妙妙wuu10 小时前
css实现文字和边框同样的渐变色效果
css·html·css3
EEEzhenliang14 小时前
CSS样式所有使用方式(书写位置)
前端·css
Yan.love20 小时前
【CSS-核心属性】“高频词”速查清单
前端·css
Yan.love20 小时前
【CSS-动画与过渡】丝滑的艺术,从简单位移到贝塞尔曲线
前端·css
Rattenking21 小时前
【CSS】---- 根据【张鑫旭-高宽不等图片固定比例布局的三重进化】的思考
前端·css
Irene199121 小时前
CSS 新特性总结(附:var() 函数详解)
css
Beginner x_u2 天前
CSS 中的高度、滚动与溢出:从 height 到 overflow 的完整理解
前端·css·overflow·min-height
Yan.love2 天前
【CSS-布局】终极方案:Flexbox 与 Grid 的“降维打击”
前端·css
闲蛋小超人笑嘻嘻2 天前
Flexbox 属性总结
前端·css
Y淑滢潇潇2 天前
WEB 模拟学校官网
前端·css