PhpStorm配置less自動編譯css

PhpStorm配置less自動編譯css

Less 是一門 CSS 預處理語言,它擴展了 CSS 語言,增加了變量、Mixin、函數(shù)等特性,使 CSS 更易維護和擴展.作為 CSS 的一種擴展,Less 不僅完全兼容 CSS 語法,并且連新增的特性也是使用 CSS 語法.這樣的設(shè)計使得學習 Less 很輕松,并且你可以在任何時候回退到 CSS...

less中文網(wǎng)：less中文網(wǎng)

nodejs下載：nodejs

less使用可作為參考；

phpstorm配置支持less必要使用npm命令；

必要安裝nodejs

本文在windows和mac下進行測試；

第一步：安裝nodejs

點此nodejs下載,找到本身對應的版本；

點擊下載；

依照提示一步一步安裝即可；

第二步：npm安裝less

在終端運行：

ps：以上命令操作你都可以在less中文網(wǎng)中找得到

然后重啟編纂器；

如果不克不及正常運行以下步驟,那就重啟電腦；

第三步：修改phpstorm配置

windows打開設(shè)置【setting】

mac找到首選項【Preferences】

打開之后,在左上角搜索框輸入：file Watchers

new watcher對話框

之后會彈出new watcher對話框

點擊ok

再點ok,把對話框全點沒了；

然后你就可以新建文件index.less進行測試

如果新建文件上部彈出提示消息；

那就點擊Add watcher添加監(jiān)聽；

每次書寫,ctrl+s保留會自動編譯css

【本文來自 武斌博客 http://www.wubin.pro,為超人原創(chuàng)文章,想獲取更好的頁面瀏覽效果或者有任何問題請進入博客,同時也可在博主評論區(qū)進行留言,讓博主為年夜家答疑解惑~】