這篇文章主要介紹了微信小程序 less文件編譯成微信小程序wxss文件實(shí)現(xiàn)辦法的相關(guān)資料,這里給出具體實(shí)現(xiàn)方法，需要的朋友可以參考下

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

2016年9月21日，微信小程序正式開(kāi)啟內(nèi)測(cè)。在微信生態(tài)下，觸手可及、用完即走的微信小程序引起廣泛關(guān)注，刷爆朋友圈子。在這樣的火爆氛圍中，作為一個(gè)前端開(kāi)發(fā)者的我，也悄悄地去嘗鮮。

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

對(duì)于基本不使用原生css，而習(xí)慣編寫less的我，這個(gè)事兒讓我的樣式編寫相當(dāng)?shù)某粤Α?/p>

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

環(huán)境要求：

– webstrom
– nodejs

具體步驟

1.使用 nodejs 命令安裝 less。

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

2.webstrom 配置

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

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

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

4).保存確認(rèn)。

3.驗(yàn)證

1).我們?cè)诰庉嬈髦序?yàn)證下是否生效。添加一個(gè)less文件，我們會(huì)發(fā)現(xiàn)編輯器自動(dòng)給我添加了一個(gè)相應(yīng)的wxss文件。

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

等會(huì)！我們的 wxss 看起來(lái)效果很差！

大家不慌，有解決辦法：

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

2).點(diǎn)擊添加圖標(biāo)，在拓展名輸入框輸入wxss，點(diǎn)擊Apply.

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

以上就是微信小程序 less文件編譯成wxss文件的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有卡有網(wǎng)。