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$(保持默认)

相关推荐
m0_535817551 小时前
macOS上Claude Code安装配置保姆级教程:国内直连API,从0到1跑通(附避坑指南)
gpt·macos·ai·node.js·claude·claudecode·88api
之歆5 小时前
Day21_电商详情页核心技术实战:从LESS预处理到复杂交互实现
开发语言·前端·javascript·css·交互·less
我有满天星辰6 小时前
Mac 安装 Redis + Spring Boot 整合 Redis(完整实战指南)
spring boot·redis·macos
游戏开发爱好者87 小时前
iOS开发工具推荐:Xcode、AppCode、SwiftLint使用心得与效率提升
ide·vscode·macos·ios·个人开发·xcode·敏捷流程
whyfail7 小时前
Codex 下载安装指南:Windows 和 macOS 官方版下载
windows·macos·codex
感谢地心引力8 小时前
在Claude Code里面使用Deepseek-v4,支持mac和Windows双系统
人工智能·windows·macos·ai·deepseek·claude code
感谢地心引力9 小时前
在codex里面使用Deepseek-v4,支持mac和windows双系统
windows·gpt·macos·ai·codex·deepseek
搬砖的小码农_Sky9 小时前
AI Agent:macOS Sequoia 部署 OpenClaw 完整教程
人工智能·macos·ai·人机交互
之歆17 小时前
Day19_LESS 完全指南——从入门到工程实践
前端·css·less
天上路人1 天前
AI 降噪不是“凭空复原语音”,而是在“已有语音信息”的基础上进行增强。
ide·人工智能·macos·语音识别·xcode