本文摘要：主要講解webpack 5 如何高效處理CSS 資源、scss/sass 資源、less 資源、 stylus 資源這裡是引用

在前端開發中，樣式是必不可少的一部分。編寫樣式最早是使用最原始的 css，隨著前端工程化的發展，逐漸出現了很多 css 預處理器，如 scss/sacc、less、stylus 等。透過這些 css 預處理器，是透過對應的語言為 css 新增程式設計特性，幫助我們編寫與時俱進、可維護性較高的樣式程式碼。

Webpack 本身並不能識別各種樣式資源（css、less、scss等），需要透過多種 loader（載入器）來幫助 Webpack 處理樣式資源。

1 處理 CSS 資源

1。1 編寫css程式碼

繼續前一節的工程，在

src

目錄下建立目錄

style/css/

，並在css目錄下建立檔案

css-demo。css

：

。demo-css

{

width

：

300px

；

height

：

80px

；

background

：

red

；

}

在

template/index。html

中標籤後面新增一個 div 標籤，class 屬性為上面定義的樣式

demo-css

：

由於之前在 webpack。config。js 指定了了 webpack 打包的入口檔案為

src/main。js

，如果不在該檔案、該檔案直接或間接引入的檔案中引入css-demo。css 檔案，webpack是不知道要打包這個 css 檔案的。所以需要在 main。js 中引入該 css 檔案：

import ‘。/style/css/css-demo。css’

1。2 打包測試

現在執行前一節配置的 build 命令讓 webpack 打包：

yarn build

。

執行後會發現報錯：

ERROR in 。/src/style/css/css-demo。css 1：0

Module parse failed： Unexpected token （1：0）

You may need an appropriate loader to handle this file type， currently no loaders are configured to process this file。 See https：//webpack。js。org/concepts#loaders

從報錯資訊中可以看出 webpack 預設無法解析 css 檔案。這時候就需要使用 loader 擴充套件 webpack 的處理能力。

1。3 安裝依賴

webpack 處理 css 樣式資源需要兩個loader依賴：css-loader 和 style-loader。

yarn add css-loader style-loader -D

1。4 配置 css 相關 loader

在 webpack。config。js 中配置上面安裝的兩個 loader，配置後 webpack。config。js 檔案如下：

const

path

=

require

（

‘path’

）

module

。

exports

=

{

entry

：

‘。/src/main。js’

，

output

： {

path

：

path

。

join

（

__dirname

，

‘dist’

），

filename

：

‘bundle。js’

}，

module

： {

rules

： ［

{

test

：

/\。css$/

，

use

： ［

‘style-loader’

，

‘css-loader’

］

}

］

}，

mode

：

‘development’

}

module 節點是新增的內容，該節點的rules 屬性就是配置loader。rules 為一個數組，陣列每個物件配置

針對什麼型別的檔案，使用哪些loader來處理

。每個物件屬性意思分別如下：

test：處理什麼檔案，可以是具體的檔名，也可以是正則表示式。這裡配置的

/\。css$/

表示以 css 結尾的檔案，即所有css檔案。

use：使用哪些loader來處理，多個loader的執行順序為從下往上（如果寫在一行，就是從右到左）。這裡配置了

style-loader

和

css-loader

，表示使用這兩個loader來處理 css 檔案，並且先使用

css-loader

來處理 css 檔案，處理後的結果再使用

style-loader

來處理。那這兩個loader分別是幹啥用的呢？

css-loader： 把 css 檔案編譯為 CommonJS 模組，並將該模組引入到 JS 中。

style-loader：建立