webstorm9.3 安裝less 編譯css教程


第一步:安裝node.js

webstrom9.3漢化下載:http://pan.baidu.com/s/1ntGNNiL    密碼:1fbh 

node.js 下載地址:https://nodejs.org/en/download/            

電腦是32位的就下32位的,樓主的是64位的。截圖如下:

下載完成后安裝,再測試是否安裝成功!

“開始菜單”—“運行” --“cmd”

輸入:node –v  注意中間的空格

image

在輸入:npm -v

image

顯示的是版本號,表示node和npm安裝成功了,下一步我們在node中安裝less,操作如下:

在命令行輸入“npm install less -g”  ,回車;

樓主已經安裝過了,就直接在網上找了一張圖,如下:

\

操作到這里表示我們已經安裝less成功了!

 

第二步:在webstorm中配置less

  1. 打開webstorm,文件 --設置  ;

image

     我使用了中文包,漢化的非常好,下載地址如下,本教程也是基於這個版本,我用過10以上的版本,漢化的非常的不好,使用起來不方便,可能是我的英文學的不好吧:

     webstrom9.3漢化下載:http://pan.baidu.com/s/1ntGNNiL    密碼:1fbh

 

      2.打開“工具” --“file Watchers”—“+”—“選擇less” 截圖如下:

image

3.配置less ,截圖如下:

image

 

配置完后,點擊“確定”保存,less我們就算是配置好了

4.測試less是否可以正常使用

新建一個test.less 文件,寫入less變量語法,截圖如下:

image

自動給我我們編譯成test.css文件,test.css編譯內容如下:

image

 

到這里less已經配置完了,盡情的享受代碼的樂趣吧!

有不清楚的地方請在文章下方留言哦^_^


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM