vscode可以使用 Easy LESS 插件实现通用的功能。
本机环境:
- 14.7.2 [macbookpro m3pro]
- WebStorm 2024.1.1
- nvm [v16.20.2]
步骤:
- 全局安装 less,这里使用 3的版本 [注意:nvm管理,切换的时候,需要重新安装!]
bash
npm uninstall -g less && npm install -g less@3.13.1
-
打开 WebStorm 的 File Watcher
● 打开 WebStorm 设置(Cmd + , 或 File > Settings)。
● 找到 File Watchers(Tools > File Watchers)。
● 点击 + 添加新的 Watcher,选择 Less。
-
配置 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$
(保持默认)