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

成功

相关推荐
卡尔特斯3 小时前
CSS 特殊符号 / 英文导致换行问题速查表
css
Komorebi゛3 小时前
【CSS】斜角流光样式
前端·css
Irene19913 小时前
CSS 废弃属性分类总结
前端·css
San30.9 小时前
告别全局污染:深入解析现代前端的模块化 CSS 演进之路
前端·css·vue.js·react.js
23级二本计科10 小时前
前端 HTML + CSS + JavaScript
前端·css·html
xuedaobian10 小时前
Markdown 宽表格突破容器边界滚动方案
前端·css
AI前端老薛11 小时前
CSS实现动画的几种方式
前端·css
San3011 小时前
告别全局污染:深入解析现代前端的模块化 CSS 演进之路
css·vue.js·react.js
程序员小李白11 小时前
定位.轮播图详细解析
前端·css·html
码客前端12 小时前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3