webpack4 系列教程(六): 处置惩罚SCSS

这节课解说
webpack4中处置惩罚
scss。只须要在处置惩罚
css的设置上增添编译
scss的 LOADER 即可。
相识更多处置惩罚css的内容 >>>

>>> 本节课源码

>>> 一切课程源码

教程所示图片运用的是 github 堆栈图片,网速过慢的朋侪请移步>>> 原文地点 webpack4 系列教程(六): 处置惩罚 SCSS 批评或许最新更新,也请移步。

1. 准备工作

为了轻易叙说,此次代码目次的款式文件只要一个scss文件,以协助我们相识中心 LOADER 的运用。

下图展现了此次的目次代码构造:
《webpack4 系列教程(六): 处置惩罚SCSS》

此次我们须要用到node-sasssass-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 预处置惩罚言语,所以我们要搜检下打包后的效果,翻开控制台,以下图所示:

《webpack4 系列教程(六): 处置惩罚SCSS》

同时,关于其他的 css 预处置惩罚言语,处置惩罚方式一样,起首应当编译成 css,然后交给 css 的相干 loader 举行处置惩罚。点我相识更多关于处置惩罚css的内容 >>>

迎接入群:_857989948_ 。IT 手艺深度交换和分享,触及方面包含但不限于:网站制造、运营、UI 设想、算法剖析、大数据、人工智能等。本群主打有深度、有立场的手艺交换,迎接热中纪录学问的您的到场。

    原文作者:心谭
    原文地址: https://segmentfault.com/a/1190000016183472
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞