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

成功

相关推荐
BIBABULALA8 小时前
Mini Virtual Machine — 可视化虚拟机模拟器(91行)
前端·css·css3
aXin_li14 小时前
从原子化到工程化:Tailwind CSS 的深层价值与实践思考
前端·css
木斯佳14 小时前
前端八股文面经大全:拓竹科技前端一面(2026-03-15)·面经深度解析
前端·css·面试·vue
北寻北爱1 天前
vue2和vue3使用less和scss
前端·less·scss
有颜有货1 天前
网站开发技术是什么?网站开发技术的定义,分类,特点,要求一文看懂
css·html·web·网站开发
大漠_w3cpluscom1 天前
利用现代 CSS 实现区间选择
前端·css·html
用户9714171814271 天前
Flex 和 Grid 详细使用指南:从入门到实战避坑
前端·css
用户9714171814271 天前
absolute 元素的包含块(containing block)怎么找
前端·css
kyriewen1 天前
响应式设计:一套代码,手机平板电脑全拿下
前端·css·html
亮子AI1 天前
【Tailwind】如何兼容旧的浏览器?
css·浏览器·tailwindcss·tailwind