對于基本不使用原生 css ,而習慣編寫 less 的我,這個事兒讓我的樣式編寫相當的吃力。
在嘗試配置 koala (一個可以編譯less/sass的工具)以及搜索各種資料后,終于找到了一個可行的方法。我以less 為示例,和大家分享下。 sass 也是可行的。
在 nodejs 命令窗口輸入: npm install less -g ,然后回車安裝。如下圖:
#####2.webstrom 配置
1).打開 webstrom 的設置,File —> Settings 。
2).展開左邊列表最后一項,找到 File Watchers 。我們可以看到右側的白色方框,再點擊添加圖標,選擇 less 。如圖所示:
3).在打開的的方框中,我們可以看到一些相關的配置。其他的我們不用管,我們只要關注兩個地方:程序的路徑和輸出路徑。 程序路徑是我前面安裝的 less 路徑,輸出路徑這個地方修改一下,將原來默認的 .css 改成 .wxss 。如下圖:
4).保存確認。
1).我們在編輯器中驗證下是否生效。添加一個 less 文件,我們會發現編輯器自動給我添加了一個相應的 wxss 文件。
2).編寫 less 文件,然后保存,再打開 wxss 文件,發現編譯成功,那我們大功告成了。
大家不慌,有解決辦法:
1).打開 webstrom 的 設置,找到 Editor 下的 File anb Code Templates . 如圖:
2).點擊添加圖標,在拓展名輸入框輸入 wxss ,點擊 Apply .
3).在彈出的文件類型框中,選擇 css 。
4).打開我們的 wxss ,發現它和 css 是一樣的。
這里我只是用 less 作為示例, sass 大同小異,大家如果有需要,可以自己弄一下。