网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

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

發布時間:2018-03-31 09:48 所屬欄目:小程序開發教程
在做demo小示例的過程中,我發現了一個極為讓人為難的事兒:如何讓 less/sass 文件轉成小程序的 wxss 文件。

對于基本不使用原生 css ,而習慣編寫 less 的我,這個事兒讓我的樣式編寫相當的吃力。

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

環境要求:

  • webstrom 編輯器
  • nodejs 環境

具體步驟

1.使用 nodejs 命令安裝 less。

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

image

#####2.webstrom 配置

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

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

image

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

image

4).保存確認。

3.驗證

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

2).編寫 less 文件,然后保存,再打開 wxss 文件,發現編譯成功,那我們大功告成了。

image

image

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

大家不慌,有解決辦法:

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

image

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

image

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

4).打開我們的 wxss ,發現它和 css 是一樣的。

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


易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/23008.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×