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

成功

相关推荐
加个鸡腿儿11 小时前
经验分享2:SSR 项目中响应式组件的闪动陷阱与修复实践
前端·css·架构
华仔啊12 小时前
写 CSS 用 px?这 3 个单位能让页面自动适配屏幕
前端·css
菩提小狗13 小时前
Sqli-Labs Less-3 靶场完整解题流程解析-豆包生成
前端·css·less
web小白成长日记17 小时前
CSS 作用域隔离实战:React、Vue 与 Styled Components 的三种范式
前端·css·vue.js·react.js
@@小旭1 天前
实现头部Sticky 粘性布局,并且点击菜单滑动到相应位置
前端·javascript·css
Irene19911 天前
CSS 定位属性(relative、absolute、fixed、sticky)与实用技巧总结
css
我的写法有点潮1 天前
推荐几个国外比较流行的UI库(上)
前端·javascript·css
m0_502724951 天前
vue动态设置背景图片后显示异常
前端·css
@Autowire2 天前
Layout-position
前端·css
神秘的猪头2 天前
🎨 CSS 这种“烂大街”的技术,怎么在 React 和 Vue 里玩出花来?—— 模块化 CSS 深度避坑指南
css·vue.js·react.js