这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。

教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步。 评论或者最新更新，也请移步。

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代码如下：

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 进行处理。

欢迎入群：857989948 。IT 技术深度交流和分享，涉及方面包括但不限于：网站制作、运营、UI 设计、算法分析、大数据、人工智能等。本群主打有深度、有态度的技术交流，欢迎热衷记录知识的您的加入。