webpack4.x - 4 loader处理css和sass

独行侠_阿涛

已于 2022-07-24 15:10:01 修改

阅读量665

点赞数

分类专栏：前端0-1 # webpack从0到1 文章标签： css sass 前端

于 2021-07-21 15:40:30 首次发布

本文链接：https://blog.csdn.net/wltsysterm/article/details/118967730

版权

前端0-1 同时被 2 个专栏收录

61 篇文章 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

webpack从0到1

12 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在webpack4.x中处理CSS和SASS文件。通过css-loader、style-loader处理CSS，解决webpack无法默认处理CSS的问题。接着，详细讲解了如何用sass-loader和node-sass将SASS编译为CSS，包括安装步骤和配置过程，最终实现成功打包并应用样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

loader概念

用 css-loader 和 style-loader 处理 CSS

css-loader 和 style-loader安装

配置文件新增css-loader style-loader

用 sass-loader和node-sass把 SASS 编译成 CSS

安装sass-loader和node-sass

配置文件新增scss-loader

背景

前面我们引入了html-webpack-plugin，细心的同学发现怎么一直都没有讲css呢。因为css的处理webpack没有默认的处理器，也就是说我们也要安装对应的处理插件来处理css。

loader概念

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

说白了，就是 loader 类似于 task，能够处理文件，比如把 Scss 转成 CSS，TypeScript 转成 JavaScript 等。