在做demo小示例的過程中，我發(fā)現(xiàn)了一個極為讓人為難的事兒：如何讓 less/sass 文件轉(zhuǎn)成小程序的 wxss 文件。

對于基本不使用原生 css ，而習慣編寫 less 的我，這個事兒讓我的樣式編寫相當?shù)某粤Α?/p>

在嘗試配置 koala （一個可以編譯less/sass的工具）以及搜索各種資料后，終于找到了一個可行的方法。我以less 為示例，和大家分享下。 sass 也是可行的。

環(huán)境要求：

• webstrom 編輯器
• nodejs 環(huán)境

具體步驟

1.使用 nodejs 命令安裝 less。

在 nodejs 命令窗口輸入： npm install less -g ,然后回車安裝。如下圖：

#####2.webstrom 配置

1).打開 webstrom 的設(shè)置，F(xiàn)ile —> Settings 。

2).展開左邊列表最后一項，找到 File Watchers 。我們可以看到右側(cè)的白色方框，再點擊添加圖標，選擇 less 。如圖所示：

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

4).保存確認。

3.驗證

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

2).編寫 less 文件，然后保存，再打開 wxss 文件，發(fā)現(xiàn)編譯成功，那我們大功告成了。

等會！我們的 wxss 看起來效果很差！

大家不慌，有解決辦法：

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

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

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

4).打開我們的 wxss ，發(fā)現(xiàn)它和 css 是一樣的。

這里我只是用 less 作為示例， sass 大同小異，大家如果有需要，可以自己弄一下。