phpstorm 配置自動編譯 less

前言

對于咱們使用phpStorm的開發者來說，很多時候用不慣vsCode，或者也懶得裝webStorm，但是在開發過程中，又得使用到 less 來進行編譯，操作如下：

安裝

• 安裝 node.js
• 安裝 less

  npm install less -g

• 安裝css壓縮插件less-plugin-clean-css（此步驟非必選，看個人需求）

  npm install less-plugin-clean-css -g

配置phpStorm

在項目裡：檔案 → 設定 → 工具 → File Watchers，File Watchers 視窗點選一個 ‘+’ 選擇 Less，打開 Less 視窗

• 下圖中：參數一欄，原本是

  $FileName$ $FileNameWithoutExtension$.css --source-map

  ，我個人不想要緩存，删除了後面的map。
• 參數欄裡

  ../page/

  是需要儲存的路徑，不一定非要儲存在目前目錄，這裡可以自由配置。

接下來 phpStorm 裡編輯less檔案，就會自動生成相應的css檔案了

小結

• 我使用的版本是 phpStorm 2022.1.2，目前版本已經有官方的中文插件了，其它版本的配置方式也大緻差不多。
• 喜歡用英文的，也可以參照上圖配置。