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

成功

相关推荐
BillKu8 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss
兜里只有三分钱~9 小时前
翻卡_3D 的仪式感,和三个让它穿帮的写法
javascript·css·3d
Beyond_System|系统之外17 小时前
一个网页如何同时适配投影仪、1366×768 和 1920×1080?我重新理解了“自适应布局”
开发语言·css·html
Claire_8818 小时前
从零搭建网页:我用AI生成HTML/CSS/JS的实践与工具整理
css·人工智能·html
平头哥~19 小时前
Day 21 | animation 与 keyframes:把动画从 A 到 B 变成多点编排
前端·css·css3·css学习
里欧跑得慢1 天前
Flutter主题与样式详解
前端·css·flutter·web
toooooop81 天前
智慧文旅数字人体验平台demo html
css·css3
yume_sibai1 天前
CSS2 核心知识点完全总结(选择器 + 三大特性 + 常用属性)
前端·css
小刘在重生~2 天前
Web 前端基础|HTML+CSS+JavaScript+Bootstrap
前端·css·html
吴长建先生重名了2 天前
如何撩妹子实战:搞定StackTrace,面试必问的底层逻辑
css