Skip to content
This repository has been archived by the owner on Mar 6, 2024. It is now read-only.

Latest commit

 

History

History

06.六：处理SCSS

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
readme.md
readme.md
 
 

readme.md

title date permalink
六：处理SCSS
2018-08-18
2018-08-18-webpack-scss

这节课以 SCSS 为例，讲解如何在webpack中编译这种 CSS 预处理语言，并配合CSS的 LOADER 来进行组合处理。一些更复杂的应用，请翻看《webpack处理 CSS》这篇文章。

>>> 了解更多处理css的内容

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

>>> 本节课源码

>>> 所有课程源码

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

<!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 预处理语言，所以我们要检查下打包后的结果，打开控制台，如下图所示：

同时，对于其他的 css 预处理语言，处理方式一样，首先应该编译成 css，然后交给 css 的相关 loader 进行处理。点我了解更多关于处理css的内容 >>>