這節課講解
webpack4
中處理scss
。只需要在處理css
的配置上增加編譯scss
的 LOADER 即可。瞭解更多處理css
的內容 >>>
教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步>>> 原文地址 webpack4 系列教程(六): 處理 SCSS。 評論或者最新更新,也請移步。
1. 準備工作
爲了方便敘述,這次代碼目錄的樣式文件只有一個scss
文件,以幫助我們瞭解核心 LOADER 的使用。
下圖展示了這次的目錄代碼結構:
這次我們需要用到node-sass
,sass-loader
等 LOADER,package.json
如下:
{
"devDependencies": {
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.16.0"
}
}
其中,base.scss
代碼如下:
$bgColor: red !default;
*,
body {
margin: 0;
padding: 0;
}
html {
background-color: $bgColor;
}
index.html
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./dist/app.bundle.js"></script>
</body>
</html>
2. 編譯打包scss
首先,在入口文件app.js
中引入我們的 scss 樣式文件:
import "./scss/base.scss";
下面,開始編寫webpack.config.js
文件:
const path = require("path");
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // 將 JS 字符串生成爲 style 節點
},
{
loader: "css-loader" // 將 CSS 轉化成 CommonJS 模塊
},
{
loader: "sass-loader" // 將 Sass 編譯成 CSS
}
]
}
]
}
};
需要注意的是,module.rules.use
數組中,loader 的位置。根據 webpack 規則:放在最後的 loader 首先被執行。所以,首先應該利用sass-loader
將 scss 編譯爲 css,剩下的配置和處理 css 文件相同。
3. 檢查打包結果
因爲 scss 是 css 預處理語言,所以我們要檢查下打包後的結果,打開控制檯,如下圖所示:
同時,對於其他的 css 預處理語言,處理方式一樣,首先應該編譯成 css,然後交給 css 的相關 loader 進行處理。點我瞭解更多關於處理css
的內容 >>>
歡迎入羣:857989948 。IT 技術深度交流和分享,涉及方面包括但不限於:網站製作、運營、UI 設計、算法分析、大數據、人工智能等。本羣主打有深度、有態度的技術交流,歡迎熱衷記錄知識的您的加入。