less文件編譯成微信小程序wxss文件

2016年9月21日，微信小程序正式開啓內測。在微信生態下，觸手可及、用完即走的微信小程序引發普遍關注，刷爆朋友圈子。在這樣的火爆氛圍中，做爲一個前端開發者的我，也悄悄地去嚐鮮。

在作demo小示例的過程當中，我發現了一個極爲讓人爲難的事兒：**如何讓 less/sass 文件轉成小程序的 wxss 文件**。</font>

對於基本不使用原生css，而習慣編寫less的我，這個事兒讓個人樣式編寫至關的吃力。

在嘗試配置koala （一個能夠編譯less/sass的工具）以及搜索各類資料後，終於找到了一個可行的方法。我以less爲示例，和你們分享下。sass也是可行的。

環境要求：

-  webstrom
-  nodejs

具體步驟
1.使用 nodejs 命令安裝 less。

在 nodejs命令窗口輸入：npm install less -g,而後回車安裝。以下圖：

2.webstrom 配置

1).打開webstrom的設置，File —> Settings。

2).展開左邊列表最後一項，找到File Watchers。咱們能夠看到右側的白色方框，再點擊添加圖標，選擇less。如圖所示：

3).在打開的的方框中，咱們能夠看到一些相關的配置。其餘的咱們不用管，咱們只要關注兩個地方：程序的路徑和輸出路徑。 程序路徑是我前面安裝的 less路徑，輸出路徑這個地方修改一下，將原來默認的.css改爲.wxss。以下圖：

4).保存確認。

3.驗證
1).咱們在編輯器中驗證下是否生效。添加一個less文件，咱們會發現編輯器自動給我添加了一個相應的wxss文件。

2).編寫less文件，而後保存，再打開wxss文件，發現編譯成功，那咱們大功告成了。

等會！咱們的 wxss 看起來效果不好！

你們不慌，有解決辦法：

1).打開webstrom的 設置，找到Editor下的File anb Code Templates. 如圖：

2).點擊添加圖標，在拓展名輸入框輸入wxss，點擊Apply.

3).在彈出的文件類型框中，選擇css。

4).打開咱們的wxss，發現它和css是同樣的。

這裏我只是用less做爲示例，sass大同小異，你們若是有須要，能夠本身弄一下。
原創文章，歡迎轉載。^_^。原文出自個人我的博客, 歡迎訪問。