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

成功

相关推荐
希望永不加班6 小时前
SpringBoot 静态资源访问(图片/JS/CSS)配置详解
java·javascript·css·spring boot·后端
里欧跑得慢8 小时前
Flutter 导航路由:构建流畅的应用导航体验
前端·css·flutter·web
MinterFusion8 小时前
HTML DOM元素的定位问题
前端·css·html
银河系的一束光12 小时前
旅游网站html、css、bootstrap
css·html·旅游
品克缤13 小时前
Vue3 + Router 页面切换时滚动条闪烁问题记录
前端·javascript·css·vue.js
北风toto1 天前
前端CSS样式详细笔记
前端·css·笔记
菲利普马洛1 天前
记一次主题闪烁问题
前端·css·react.js
逆光如雪1 天前
移动端卡片边框怎么做高级?我用 CSS 实现了设计师的刁钻要求
前端·css·vue.js
走粥3 天前
clsx和twMerge解决CSS类名冲突问题
前端·css
吠品3 天前
CSS图片居中:Flexbox、Grid与Transform的完整指南
前端·css