mac下使用webstorm监听less文件自动生成wxss文件

vscode可以使用 Easy LESS 插件实现通用的功能。

本机环境:

  • 14.7.2 macbookpro m3pro
  • WebStorm 2024.1.1
  • nvm v16.20.2

步骤:

  1. 全局安装 less,这里使用 3的版本 **注意:nvm管理,切换的时候,需要重新安装!**
bash 复制代码
npm uninstall -g less && npm install -g less@3.13.1
  1. 打开 WebStorm 的 File Watcher

    ● 打开 WebStorm 设置(Cmd + , 或 File > Settings)。

    ● 找到 File Watchers(Tools > File Watchers)。

    ● 点击 + 添加新的 Watcher,选择 Less。

  2. 配置 File Watcher

    在新建的 Less Watcher 里,修改如下配置:

    ● File type: Less

    ● Scope: Project Files

    ● Program: 填写 Less 运行路径,通常是:

    ○ lessc(如果是全局安装)

    ○ 或者填写项目中的 Less 位置,例如:node_modules/.bin/lessc

    ● Arguments: 修改为:

bash 复制代码
  $FileName$ $FileNameWithoutExtension$.wxss

● Output Paths:

bash 复制代码
$FileNameWithoutExtension$.wxss

● Working directory: $FileDir$(保持默认)

相关推荐
FPGA小迷弟9 小时前
FPGA 与千兆以太网:各类物理接口的形式、区别、使用方法与应用场景详解
tcp/ip·macos·fpga开发·udp·fpga
雪芽蓝域zzs2 天前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm
周小董2 天前
[1379]mac安装nvm
macos
bossjuemfc3 天前
不记得文件名时,Mac 上的搜索还能怎么做?
macos
2501_915909063 天前
Windows 打开 Xcode 工程,编译调试 Xcode 项目并和 Mac 同事协作
ide·windows·vscode·macos·ios·个人开发·xcode
请为小H留灯3 天前
Mac 常用操作与维护技巧
macos·电脑·清理电脑·常用技巧
hantmac3 天前
不记得文件名时,Mac 上的搜索还能怎么做?
人工智能·macos
这是谁的博客?3 天前
AI 加速器 RTL 数字系统设计深度解析:从 MAC 阵列 Verilog 实现到时序收敛与时钟功耗的芯片落地全链路
人工智能·macos·ai·verilog·数字ic设计·ai芯片·rtl
slacker-kian3 天前
M 系列 Mac 清除顽固的 CorpLink
macos·corplink·m系列
kk_net88994 天前
FSNotes:macOS 和 iOS 上的开源笔记管理器
笔记·其他·macos·ios