WordPress
使用 Webpack 使用 sass-loader 編譯 Bootstrap
接下來我們介紹 Sass 這個 CSS 預處理器的基本用法,Sass 分成兩種撰寫風格 Sass 以及 Scss 由於 Scss 的撰寫風格與 CSS 較為接近,所以接下來我們都會以 Scss 來做為示範程式碼。說到 Scss 最基本的概念就是他可以階層式的撰寫選擇器
首頁 > Webpack
接下來我們介紹 Sass 這個 CSS 預處理器的基本用法,Sass 分成兩種撰寫風格 Sass 以及 Scss 由於 Scss 的撰寫風格與 CSS 較為接近,所以接下來我們都會以 Scss 來做為示範程式碼。說到 Scss 最基本的概念就是他可以階層式的撰寫選擇器
Webpack 作為一個 javaScript 的編譯工具,其實是看不懂 JS 以外的檔案,所以如果我們要請它編譯 CSS 、 Sass 或是圖片等等的檔案,我們就會需要 loader 這一個 Webpack 的模組讓它有辦法讀取檔案然,再編譯成我們要的樣子。
Webpack 是提升工程師工作效率的好工具,它可以合併已經模組化的 JavaScript 成一個檔案,讓工程師有效的管理重複的程式碼不需要再重複撰寫或是到單一檔案去複製貼上,也可以將套件的程式碼合併到自己的 JavaScript 檔案去管理程式碼相依性以及減少 HTTP 請求次數。
立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!