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

成功

相关推荐
2401_878454534 小时前
html和css的复习(1)
前端·css·html
米丘11 小时前
vue3.5.x 单文件组件(SFC)样式编译过程
css·vue.js·postcss
ZC跨境爬虫14 小时前
前端实战复盘:从零完成Apple中国大陆官网UI第一阶段全量静态复刻
前端·css·ui·html
ZC跨境爬虫16 小时前
Apple官网复刻第二阶段day_1:(导航栏模块化重构+工业化可复用UI落地)
前端·javascript·css·ui·重构
花归去17 小时前
a-table 冻结列导致边框
前端·css·css3
朝阳3917 小时前
CSS【详解】给子元素添加间距的最佳实践(含space 和 gap 的区别图解和面试的标准答案)
前端·css
Mr.mjw17 小时前
vue中封装一个进度条组件,无需引入,纯css
javascript·css·vue.js
军军君011 天前
数字孪生监控大屏实战模板:智能业务大数据监管平台
css·vue.js·elementui·typescript·前端框架·echarts·less
睿智的海鸥2 天前
Markdown 语法大全详解
开发语言·前端·javascript·css·html
爱上好庆祝2 天前
学习js的第三天
前端·css·人工智能·学习·计算机外设·js