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

成功

相关推荐
a11177616 小时前
电流卡片特效(html网页 开源)
javascript·css·css3
干前端2 天前
Vue3 组件库工程化实战:BEM 命名规范与 useNamespace 深度解析
前端·css
RFCEO2 天前
前端编程 课程十四、:CSS核心基础2:选择器优先级 + 伪类选择器(解决冲突+交互效果)
前端·css·交互·css选择器优先级判断规则详解·css important使用·css链接伪类lvha顺序·实现悬浮交互效果
小满zs2 天前
Next.js第二十五章(CSS方案)
开发语言·javascript·css
红色的小鳄鱼2 天前
Vue 监视属性 (watch) 超全解析:Vue2 Vue3
前端·javascript·css·vue.js·前端框架·html5
Hacker_Z&Q2 天前
CSS 笔记2 (属性)
前端·css·笔记
CappuccinoRose3 天前
CSS前端布局总指南
前端·css·学习·布局·flex布局·grid布局·float布局
强子感冒了3 天前
CSS基础学习:CSS选择器与优先级规则
前端·css·学习
layman05283 天前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔3 天前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html