這篇文章給大家分享的是有關(guān)微信小程序中如何將less文件編譯成wxss文件的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設公司，我們專注成都網(wǎng)站設計、成都網(wǎng)站建設、外貿(mào)網(wǎng)站建設、網(wǎng)絡營銷、企業(yè)網(wǎng)站建設，賣友情鏈接，廣告投放平臺為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設計到用戶體驗提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

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

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

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

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

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

環(huán)境要求：

- webstrom
- nodejs

具體步驟

1.使用 nodejs 命令安裝 less。

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

2.webstrom 配置

1).打開webstrom的設置，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的 設置，找到Editor下的File anb Code Templates. 如圖：

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

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

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

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

感謝各位的閱讀！關(guān)于“微信小程序中如何將less文件編譯成wxss文件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章題目：微信小程序中如何將less文件編譯成wxss文件
新聞來源：http://m.kartarina.com/article6/pojsig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、、電子商務、搜索引擎優(yōu)化、定制開發(fā)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)