gatsby.js 安裝plugin

[影片]Gatsby.js 未來的網頁05:安裝Plugin

和WordPress一樣,Gatsby.js也有plugin系統,透過NPM安裝。你可以在Gatsby.js 官網找到所有plugin。今天我們要學習怎樣安裝plugin。

gatsby-config.js

gatsby-config.js當中的plugins部分設定了這個網站的所有plugins。以下是預設Starter的gatsby-config.js:

可以看到plugins是一個array,裡面一共有三個plugins,以逗號分開。其中,第二個plugin是一個object,以大括號包起來。這樣做是為了對plugin進行設定。大括號裡的resolve部分是plugin的名稱,options部分便是針對這個plugin的設定,設定內容因不同plugin而異。

安裝plugin

以gatsby-plugin-sass為例,官方文檔提供了指令:

在Command Line,這個網站的位置執行即可。

接著,要在gatsby-config.js中加入這個plugin,由於我們不需要額外設定,只要將plugin名稱加到plugins array最後即可:

測試plugin

為了測試這個plugin,我們可以把/src/components/當中的layout.css,改為SASS專用的SCSS格式:layout.scss。並在layout.js裡,找到:

同樣改為:

執行gatsby develop,查看效果,應該和之前完全一樣。若你的gatsby網站一直跑著,記得先結束(Control + C),再執行一次gatsby develop,因為安裝plugin後需要重啟。

若要進一步測試,可以在layout.scss當中使用SASS語法,如:

本文參與iT邦幫忙鐵人賽簡體

No comment yet, add your voice below!


Add a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Comment *
Name *
Email *
Website

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料