Webstorm And VSCODE 中配置LESS/SASS轉換成CSS文件

  Now，已經有很多種方法將LESS/SASS的文件轉成CSS文件，如：webpack、gulp等

  現在想說一下在寫PC/HTML5靜態頁面的時候爲了方便快捷，而不是用構建工具那麼如何將LESS/SASS的文件轉成CSS文件？

  ******

  現在VSCODE備受歡迎已經不用多說：

  ******

1. 需要下載 Easy LESS 插件
2. 安裝成功打開設置 User Settings 
3. 加入設置

   "less.compile": {
       "compress": true, //刪除多餘的空格
       "sourceMap": false,//是否生成.css.map文件
       "out": "..\\css\\", //輸出文件的位置，這裏設置的是LESS文件將轉化在與父級同級css文件下面，如果想設置在根目錄下面則爲："${workspaceRoot}\\css\\"
       "outExt": ".css"  //輸出文件類型，默認CSS
     }

    

4.  愉快的Lu代碼

  ******

  Webstorm中爲 ：

  ******

1. 使用npm下載LESS

    npm install -g less

    

2. 打開webstorm => Setting => Tools => File Watcher 添加“+”選擇LESS，會出現
4. Program：文件選擇爲你下載後的lessc.cmd文件
5. Arguments：輸入

   $FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css --source-map
   
   // 註釋 $FileParentDir$ 意思爲與Less文件夾同級，
   // 並新建css文件
   // $FileNameWithoutExtension$相同的名字
   

    

6. Output Paths ti refesh可以不用輸入，或者不動。