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

成功

相关推荐
peter67688 小时前
css揭秘-背景和边框
前端·css
溪语流沙1 天前
【每天一个CSS | Day08】整排按钮被鼠标吸走的磁吸导航
前端·css·计算机外设
peter67681 天前
css学习小结
前端·css·学习
liangshanbo12151 天前
什么是CSS原子化?它的优劣势是什么?
前端·css·tensorflow·css原子化
Flynt2 天前
Linear 用 1000 个 PR 换掉 styled-components,我写了 200 个按钮,把这笔账复现了一遍
前端·css·preact
java_nnnn2 天前
JavaEE进阶-CSS初识
java·前端·css·java-ee·html
赵锦川2 天前
css代替表格
前端·css
小刘在重生~2 天前
CSS 零基础完整学习笔记|选择器|盒子模型|布局
css·笔记·学习
天天喝旺仔2 天前
浏览器渲染原理:从解析 HTML/CSS、构建渲染树到重排重绘与首屏优化
前端·javascript·css·性能优化·html
DsirNg3 天前
响应式的真正输入:为组件重新定义可用空间
css·flexbox·grid·前端架构·响应式布局·设计系统·container queries