webpack（5）webpack處理css檔案

Silent丿丶黑羽發表於2021-07-11
WebCSS

css檔案處理-準備工作

(以下專案配置都是基於上一篇webpack(4)的基礎上)
在專案開發中，我們必然需要新增很多的樣式，而樣式我們往往寫到一個單獨的檔案中。

這裡我們就在src目錄中建立一個normal.css檔案，程式碼如下：

body{
    background-color: aqua;
}

程式碼很簡單，就是將body設定一個背景顏色，但是此時樣式是不會生效的，因為我們根本沒有引用它，所以我們需要在入口main.js中引入css

// 引用css檔案
require('./css/normal.css')

 

安裝loader並配置

準備工作處理完後，我們需要安裝2個loader

  • style-loader 將模組匯出的內容作為樣式並新增到 DOM 中
  • css-loader 載入 CSS 檔案並解析 import 的 CSS 檔案，最終返回 CSS 程式碼

安裝命令如下：

npm install --save-dev style-loader css-loader

安裝完成後我們還需要在webpack.config.js檔案中進行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

注意：這裡use列表中的2個loader順序是不能互換的，因為loader 是從右到左（或從下到上）地取值(evaluate)/執行(execute)。所以上面的示例是先執行css-loader載入樣式檔案後，再執行style-loader
 

實踐結果

最後我們使用npm run build就可以打包成功，然後訪問index.html，頁面呈現的顏色就是我們normal.css樣式中設定的顏色

相關文章