Webstorm配置LESS自動(dòng)編譯CSS

發(fā)布時(shí)間:2019/8/1 16:27:00

1. 失敗了好幾次,第二天又操作了一番,竟然又成功了,以下照常規(guī)步驟。

2.  安裝node.js  (下載地址:https://nodejs.org/ )

記下安裝路徑,如(我的是默認(rèn)) C:\Program Files\nodejs

3.打開(kāi)命令行工具cmd,進(jìn)入nodejs安裝目錄,輸入命令:

      c: 

回車(chē),再輸入命令:

     cd C:\Program Files\nodejs

4.使用node來(lái)安裝less,輸入命令:

npm install -g less

默認(rèn)安裝路徑:C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\.bin\lessc

5. 然后,我是裝了一個(gè)webstorm的LESS CSS Compiler

下載地址:https://plugins.jetbrains.com/plugin/7059-less-css-compiler

安裝方法:打開(kāi)“WebStorm”,按“File >> Settings >> Plugins”進(jìn)入插件安裝界面,通過(guò)“Install plugin from disk…”按鈕,選擇下載的安裝包進(jìn)行安裝。安裝完成后,重啟即可。

6. 當(dāng)我再次修改LESS文件時(shí),提示我設(shè)置File Watchers,點(diǎn)擊進(jìn)入設(shè)置,

如圖。

Program:C:\Program Files\nodejs\node_modules\.bin\lessc.cmd

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

Output path to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map


7.然后竟然可以了,不知道是什么緣故,大家動(dòng)手試一試吧。

WebStorm版本:2018.1



Copyright© 2004-2020 河南海騰電子技術(shù)有限公司 版權(quán)所有   經(jīng)營(yíng)性ICP/ISP證 備案號(hào):B1-20180452   豫公網(wǎng)安備 41019702002018號(hào)    電子營(yíng)業(yè)執(zhí)照