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就行。

成功

相关推荐
xcjbqd010 小时前
CSS中隐藏元素的多重技巧与应用场景
前端·css
慕斯fuafua15 小时前
CSS——定位
前端·css
AnalogElectronic16 小时前
html+js+css实现七龙珠神龙召唤特效
javascript·css·html
qq_3813385017 小时前
现代 CSS 黑科技:Container Queries、:has() 与嵌套语法实战
前端·css·科技
程序员buddha2 天前
SCSS从0到1精通教程
前端·css·scss
小李子呢02112 天前
前端八股CSS---CSS选择器和优先级
前端·css
Sheldon一蓑烟雨任平生2 天前
grid(一文读懂 css 网格布局)
前端·css·grid·grid-template·现代css·css 网格布局
05Nuyoah2 天前
CSS 基础认知和基础选择器
前端·javascript·css·node.js
Sheldon一蓑烟雨任平生2 天前
边框按钮(纯CSS)
前端·css·动态按钮·css变量·边框按钮·按钮动画
里欧跑得慢2 天前
Flutter 测试全攻略:从单元测试到集成测试的完整实践
前端·css·flutter·web