webpack4 系列教程(六): 處理SCSS

馬龍駒發布于2019-08-23 11:33 / 2699人閱讀

摘要：只需要在處理的配置上增加編譯的即可。了解更多處理的內容本節課源碼所有課程源碼教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步原文地址系列教程六處理。根據規則放在最后的首先被執行。

這節課講解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代碼如下：




  
  
  
  Document

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 設計、算法分析、大數據、人工智能等。本群主打有深度、有態度的技術交流，歡迎熱衷記錄知識的您的加入。

GPU云服務器云服務器 webpack4教程 a系列處理器gpu linux系列教程云服務器建站教程系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97125.html

webpack-demos：全網最貼心webpack系列教程和配套代碼

摘要：全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節，每節都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網最貼心 webpack 系列教程和配套代碼歡迎關注個人技術博客：godbmw.com。每周 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...

LMou 2019-08-23 12:25 評論0 收藏0
webpack4 系列教程(七): SCSS提取和懶加載

摘要：教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步原文系列教程七提取和懶加載。個人技術小站有空就來看看我一直都在本節課講解在中的提取和懶加載。值得一提的是，和在的懶加載上的處理方法有著巨大差別。教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懶加載。個人技術小站: https://godbmw.c...

崔曉明 2019-08-23 11:39 評論0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步原文地址有空就來看看個人技術小站, 我一直都在 0. 課程介紹和資料本次課程的代碼目錄(如下圖所示)：s...

趙連江 2019-08-29 16:36 評論0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步原文地址有空就來看看個人技術小站, 我一直都在 0. 課程介紹和資料本次課程的代碼目錄(如下圖所示)：s...

superw 2019-08-23 11:40 評論0 收藏0
webpack4 系列教程: 前言

摘要：課程地址全部課程地址立即進入課程源碼目錄截至按照知識點，目錄分成了個文件夾之后還會持續更新。個人網站原文鏈接系列教程前言本文檔已經過時，最近內容請看：https://godbmw.com/passage/76。一共16節課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發者可以輕松地實現加密代碼、多平臺兼容。而最重要的...

DevWiki 2019-08-23 10:25 評論0 收藏0