webstorm | 编译 Less 保存自动生成 wxss/a

前言

因为感觉用微信开发者工具开发真的很不习惯，所以我都是用WebStorm开发，再用微信开发者工具来预览。本文主要记录一下利用webstorm编译less

---

正文

配置方案
1、配置在当前目录生成.wxss

Arguments：
--no-color $FileName$ $FileNameWithoutExtension$.wxss
# --no-color 禁用彩色的输出
# $FileName$ 当前编辑文件名
# $FileNameWithoutExtension$.wxss 去除.less扩展名再加上.wxss扩展名

Output paths to refresh：
$FileNameWithoutExtension$.wxss
# 保存在当前less目录下，并刷新项目结构显示文件出来

2、less独立文件夹，生成 .wxss 文件到指定的目录中

Arguments：
--no-color $FileName$ $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.wxss
# --no-color 禁用彩色的输出
# $FileName$ 当前编辑文件名
# $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.wxss 项目目录/pages/在当前目录找到父目录less的路径/当前编辑文件名去除.less扩展名再加上.wxss扩展名

Output paths to refresh：
$ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.wxss
# 保存在指定的目录下，并刷新项目结构显示文件出来

微信小程序wxss

• 首先配置样式支持
  路径 File | Settings | Editor | File Types
  

  image.png
  image.png

• 配置自动生成wxss
  路径 File | Settings | Tools | File Watchers | +
  

  image.png

1、配置在当前目录生成.wxss

image.png

• 配置完成

  
  image.png
  image.png

2、less独立文件夹，生成 .wxss 文件到指定的目录中

image.png
image.png

支付宝小程序acss

和微信步骤一样，只是后缀不同

• 先配置支持acss

  
  image.png
• 在配置自动生成acss
  路径 File | Settings | Tools | File Watchers | +
  image.png

编译成css

路径 File | Settings | Tools | File Watchers | +
点加号，选择less, 弹出下面的窗口，已经有默认配置了，点ok即可

image.png