专栏首页YuanXin六:处理SCSS

六:处理SCSS

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

1. 准备工作

为了方便叙述,这次代码目录的样式文件只有一个scss文件,以帮助我们了解核心 LOADER 的使用。

下图展示了这次的目录代码结构:

这次我们需要用到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代码如下:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 七:SCSS提取和懒加载

    本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别:

    心谭博客
  • 十一:字体文件处理

    如上面的代码目录所示,字体文件和样式都放在了/src/assets/fonts/目录下。点我直接下载相关文件

    心谭博客
  • 十:图片处理汇总

    如项目代码目录展示的那样,除了常见的app.js作为入口文件,我们将用到的 3 张图片放在/src/assets/img/目录下,并在样式文件base.css中...

    心谭博客
  • webpack实战——预处理器(loader)【上篇】

    当使用 babel-loader 将 ES6+ 代码转化为 ES5 时,带入公式:

    流眸
  • Webpack4干货分享(二),使用loader处理scss,图片以及转换JS

    今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后,是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loade...

    葡萄城控件
  • Webpack4教程 - 第二部分,使用loader处理scss,图片以及转换JS

    今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后,是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loade...

    葡萄城控件
  • Webpack4教程:使用loader处理scss,图片以及转换JS(第二章)

    今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后,是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loade...

    Javanx
  • (8/24) 图片跳坑大战--css中的图片处理

    前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码。上一节

    wfaceboss

扫码关注云+社区

领取腾讯云代金券