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

成功

相关推荐
南囝coding16 小时前
2025年CSS新特性大盘点
前端·css
颜渊呐17 小时前
Vue3 + Less 实现动态圆角 TabBar:从代码到优化实践
前端·css
yby154118 小时前
【人类写的】anki卡片制作入门
css
卸任19 小时前
解密Flex布局:为什么flex:1仍会导致内容溢出
前端·css·flexbox
Jing_Rainbow1 天前
【前端三剑客-9 /Lesson17(2025-11-01)】CSS 盒子模型详解:从标准盒模型到怪异(IE)盒模型📦
前端·css·前端框架
程序员小寒2 天前
前端高频面试题之CSS篇(一)
前端·css·面试·css3
fruge2 天前
低版本浏览器兼容方案:IE11 适配 ES6 语法与 CSS 新特性
前端·css·es6
han_2 天前
前端高频面试题之CSS篇(一)
前端·css·面试
不会玩电脑的Xin.3 天前
HTML + CSS
前端·css·html
悟能不能悟3 天前
<style scoped>vue中怎么引用css文件
css·vue.js