webstorm file watchers 配置scss、less输出路径

sass

1. 首先要有ruby环境，验证Ruby是否安装成功
   ruby -v 或ruby --version
2. 然后安装sass(npm install -g sass或 官网下载)
   sass -v 或 sass --version
3. webstorm 配置指定输出路径
   1. perferences>tools>file watchers>点击加号>scss。（
      若无file watchers 则在perferences>plugins搜索file watchers 下载安装）
   2. arguments:
      --no-cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css
      output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
      说明：.scss文件与css文件夹的关系为:

image.png

$FileParentDir$意思是.scss所在文件夹(scss)的父文件(hello)。

less

1. npm install -g less
2. 1. perferences>tools>file watchers>点击加号>scss。（
      若无file watchers 则在perferences>plugins搜索file watchers 下载安装）
   2. arguments:
      $FileName$ $FileParentDir$/css/$FileNameWithoutExtension$.css --source-map
      output paths to refresh:
      $FileParentDir$/css/$FileNameWithoutExtension$.css.map(.less文件与css文件夹的关系与以上一样)