webpack4 系列教程六處理SCSS

>>> 本節課原始碼

>>> 所有課程原始碼

為了方便敘述，這次**目錄的樣式檔案只有乙個scss檔案，以幫助我們了解核心 loader 的使用。

下圖展示了這次的目錄**結構：

這次我們需要用到node-sass，sass-loader等 loader，package.json如下：

其中，base.scss**如下：

$bgcolor: red !default;
*,body 
html

index.html**如下：

import "./scss/base.scss";

下面，開始編寫webpack.config.js檔案:

const path = require("path");
module.exports = ,
output: ,
module: ,,]
}]
}};

需要注意的是，module.rules.use陣列中，loader 的位置。根據 webpack 規則：放在最後的 loader 首先被執行。所以，首先應該利用sass-loader將 scss 編譯為 css，剩下的配置和處理 css 檔案相同。

因為 scss 是 css 預處理語言，所以我們要檢查下打包後的結果，開啟控制台，如下圖所示：

歡迎入群：857989948 。it 技術深度交流和分享，涉及方面包括但不限於：**製作、運營、ui 設計、演算法分析、大資料、人工智慧等。本群主打有深度、有態度的技術交流，歡迎熱衷記錄知識的您的加入。

webpack4 系列教程 六 處理SCSS