資訊專欄INFORMATION COLUMN
摘要：只需要在處理的配置上增加編譯的即可。了解更多處理的內(nèi)容本節(jié)課源碼所有課程源碼教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步原文地址系列教程六處理。根據(jù)規(guī)則放在最后的首先被執(zhí)行。
這節(jié)課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。了解更多處理css的內(nèi)容 >>>
>>> 本節(jié)課源碼
>>> 所有課程源碼
教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步>>> 原文地址 webpack4 系列教程(六): 處理 SCSS。 評論或者最新更新，也請移步。
1. 準(zhǔn)備工作為了方便敘述，這次代碼目錄的樣式文件只有一個(gè)scss文件，以幫助我們了解核心 LOADER 的使用。
下圖展示了這次的目錄代碼結(jié)構(gòu)：
這次我們需要用到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代碼如下：
2. 編譯打包scssDocument
首先，在入口文件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 節(jié)點(diǎn)
},
{
loader: "css-loader" // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
},
{
loader: "sass-loader" // 將 Sass 編譯成 CSS
}
]
}
]
}
};
需要注意的是，module.rules.use數(shù)組中，loader 的位置。根據(jù) webpack 規(guī)則：放在最后的 loader 首先被執(zhí)行。所以，首先應(yīng)該利用sass-loader將 scss 編譯為 css，剩下的配置和處理 css 文件相同。
3. 檢查打包結(jié)果因?yàn)?scss 是 css 預(yù)處理語言，所以我們要檢查下打包后的結(jié)果，打開控制臺(tái)，如下圖所示：
同時(shí)，對于其他的 css 預(yù)處理語言，處理方式一樣，首先應(yīng)該編譯成 css，然后交給 css 的相關(guān) loader 進(jìn)行處理。點(diǎn)我了解更多關(guān)于處理css的內(nèi)容 >>>
歡迎入群：_857989948_ 。IT 技術(shù)深度交流和分享，涉及方面包括但不限于：網(wǎng)站制作、運(yùn)營、UI 設(shè)計(jì)、算法分析、大數(shù)據(jù)、人工智能等。本群主打有深度、有態(tài)度的技術(shù)交流，歡迎熱衷記錄知識的您的加入。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97125.html
摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...
摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步原文系列教程七提取和懶加載。個(gè)人技術(shù)小站有空就來看看我一直都在本節(jié)課講解在中的提取和懶加載。值得一提的是，和在的懶加載上的處理方法有著巨大差別。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懶加載。 個(gè)人技術(shù)小站: https://godbmw.c...
摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識點(diǎn)，目錄分成了個(gè)文件夾之后還會(huì)持續(xù)更新。個(gè)人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過時(shí)，最近內(nèi)容請看：https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發(fā)者可以輕松地實(shí)現(xiàn)加密代碼、多平臺(tái)兼容。而最重要的...
閱讀 1806·2021-11-24 10:21
閱讀 1216·2021-09-22 15:25
閱讀 3176·2019-08-30 15:55
閱讀 716·2019-08-30 15:54
閱讀 3467·2019-08-30 14:20
閱讀 1665·2019-08-30 14:06
閱讀 646·2019-08-30 13:11
閱讀 3153·2019-08-29 16:43
