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

時間 2019-12-07

標籤 webpack4 webpack 系列教程處理 scss 简体版

原文原文鏈接

這節課講解 webpack4中處理 scss。只須要在處理 css的配置上增長編譯 scss的 LOADER 便可。瞭解更多處理css的內容 >>>

>>> 本節課源碼javascript

>>> 全部課程源碼css

教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步>>> 原文地址 webpack4 系列教程(六): 處理 SCSS。 評論或者最新更新，也請移步。html

1. 準備工做

爲了方便敘述，此次代碼目錄的樣式文件只有一個scss文件，以幫助咱們瞭解核心 LOADER 的使用。java

下圖展現了此次的目錄代碼結構：
node

此次咱們須要用到node-sass，sass-loader等 LOADER，package.json以下：webpack

{
  "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代碼以下：git

$bgColor: red !default;
*,
body {
  margin: 0;
  padding: 0;
}
html {
  background-color: $bgColor;
}

index.html代碼以下：github

<!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 樣式文件：web

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 文件相同。