webstorm file watchers 配置scss、less輸出路徑

sass

  1. 首先要有ruby環(huán)境，驗(yàn)證Ruby是否安裝成功
    ruby -v 或ruby --version
  2. 然后安裝sass(npm install -g sass或 官網(wǎng)下載)
    sass -v 或 sass --version
  3. webstorm 配置指定輸出路徑
    1. perferences>tools>file watchers>點(diǎn)擊加號(hào)>scss。（
      若無(wú)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
      說(shuō)明：.scss文件與css文件夾的關(guān)系為:
image.png

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

less

  1. npm install -g less
    1. perferences>tools>file watchers>點(diǎn)擊加號(hào)>scss。（
      若無(wú)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文件夾的關(guān)系與以上一樣)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容