Webpack幹貨系列 | 怎麼運用 Webpack 5 處理css/scss/sass、less、stylus樣式資源

webpack 5 如何高效處理CSS 資源、scss/sass 資源、less 資源、 stylus 資源這裡是引用

程式員優雅哥簡介：十年程式員，呆過央企外企私企，做過前端後端架構。分享vue、Java等前後端技術和架構。

本文摘要：主要講解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

<div class="demo-css">css demo</div>

由于之前在 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：建立

style

标簽，将 JS 中的 CSS 添加到 HTML中。

TODO 這裡添加一張圖描述

1.5 打包測試運作

配置好 webpack.config.js 後，便可以運作 build 指令讓 webpack 打包了。

yarn build

這時可以看到 webpack 打包成功。

webpack 5.73.0 compiled successfully in 632 ms

在浏覽器中運作

template/index.html

，可以看到 css-demo.css 中定義的樣式已經生效。檢視網頁元素，可以在head中看到上面定義的樣式插入到style标簽裡面：

2 處理 scss/sass 資源

scss 與 sass 類似，隻是在寫法上面，sass 不使用花括号和分号。

2.1 編寫 scss/sass 代碼

在

src/style

scss

，并在

scss

中分别建立樣式檔案

scss-demo.scss

和

sass-demo.sass

。

scss-demo.scss：

.demo-scss {
  width: 300px;
  height: 80px;
  background: blue;
}

Sass-demo.scss:

.demo-sass
  width: 300px
  height: 80px
  background: darkblue

在

template/index.html

中添加測試元素div:

<div class="demo-scss">scss demo</div>
<div class="demo-sass">sass demo</div>

在

src/main.js

中引入上面兩個樣式檔案：

import './style/scss/scss-demo.scss'
import './style/scss/sass-demo.sass'

2.2 安裝依賴

處理 scss 檔案，需要使用到 sass、sass-loader、css-loader 和 style-loader。sass-loader 用于将 scss/sass 檔案編譯為 css 檔案，編譯後的 css 檔案依次經過 css-loader 和 style-loader 處理，最後通過style标簽插入到HTML中。sass-loader 需要依賴 sass。

由于前面已經安裝了 css-loader 和 style-loader，此處再安裝 sass 和 sass-loader 即可。

yarn add sass sass-loader -D

2.3 配置 scss/sass 相關loader

上面在rules中配置了針對 css 檔案的 loader，現繼續在後面配置針對 scss/sass 配置的loader：

module: {
    rules: [
      ...
      {
        test: /\.s[ca]ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      }
    ]
  },

TODO 添加一個圖

2.4 打包測試運作

先執行

yarn build

打包，打包成功後在浏覽器中檢視：

3 處理 less 資源

3.1 編寫 less 代碼

在

src/style

less

，并在

less

中建立樣式檔案

less-demo.less

：

less-demo.scss：

.demo-less {
  width: 300px;
  height: 80px;
  background: green;
}

在

template/index.html

中添加測試元素div:

<div class="demo-less">less demo</div>

在

src/main.js

中引入上面兩個樣式檔案：

import './style/less/less-demo.less'

3.2 安裝依賴

處理 less 檔案，需要使用到 less-loader、css-loader 和 style-loader。less-loader 用于将 less 檔案編譯為 css 檔案，編譯後的 css 檔案依次經過 css-loader 和 style-loader 處理，最後通過style标簽插入到HTML中。less-loader 依賴于 less。

yarn add less less-loader -D

3.3 配置 less 相關loader

在rules中配置了針對 less 檔案的 loader:

module: {
    rules: [
      ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ]
      }
    ]
  },

TODO 添加一個圖

3.4 打包測試運作

先執行

yarn build

打包，打包成功後在浏覽器中檢視：

4 處理 stylus 資源

stylus 的文法更加簡潔，除了省略花括号和分号，連冒号也省略了。但是要嚴格注意縮進。

4.1 編寫 stylus 代碼

在

src/style

stylus

，并在

stylus

中建立樣式檔案

stylus-demo.styl

：

.demo-stylus
  width 300px
  height 80px
  background yellow

在

template/index.html

中添加測試元素div:

<div class="demo-stylus">stylus demo</div>

在

src/main.js

中引入上面兩個樣式檔案：

import './style/stylus/stylus-demo.styl'

4.2 安裝依賴

處理 stylus 檔案，需要使用到 stylus-loader、css-loader 和 style-loader。stylus-loader 用于将 styl檔案編譯為 css 檔案，編譯後的 css 檔案依次經過 css-loader 和 style-loader 處理，最後通過style标簽插入到HTML中。stylus-loader 依賴于 stylus。

yarn add stylus stylus-loader -D

4.3 配置 stylus 相關loader

在rules中配置了針對 less 檔案的 loader:

module: {
    rules: [
      ...
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  },

TODO 添加一個圖

4.4 打包測試運作

先執行

yarn build

打包，打包成功後在浏覽器中檢視：

今日優雅哥（youyacoder）學習結束，期待關注留言分享~~

Webpack幹貨系列 | 怎麼運用 Webpack 5 處理css/scss/sass、less、stylus樣式資源

1 處理 CSS 資源

1.1 編寫css代碼

1.2 打包測試

1.3 安裝依賴

1.4 配置 css 相關 loader

1.5 打包測試運作

2 處理 scss/sass 資源

2.1 編寫 scss/sass 代碼

2.2 安裝依賴

2.3 配置 scss/sass 相關loader

2.4 打包測試運作

3 處理 less 資源

3.1 編寫 less 代碼

3.2 安裝依賴

3.3 配置 less 相關loader

3.4 打包測試運作

4 處理 stylus 資源

4.1 編寫 stylus 代碼

4.2 安裝依賴

4.3 配置 stylus 相關loader

4.4 打包測試運作

繼續閱讀

配置Webpack Dev Server 實戰操作方法步驟

在Webpack 5 中如何進行 CSS 常用配置？

Webpack學習系列 - Webpack5 怎麼內建Babel ？

Webpack幹貨系列 | 在 Webpack 5 內建 ESLint 的方法

Webpack學習系列 | Webpack 5 內建 HTML 插件高效解決檔案路徑問題

優雅哥學 Webpack - 01 - Webpack 5 快速體驗

Webpack幹貨系列 | Webpack5 怎麼處理字型圖示、圖檔資源

configuration.devtool should match pattern ......