webpack4 处理SCSS的方法示例

前端之家收集整理的这篇文章主要介绍了webpack4 处理SCSS的方法示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1. 准备工作

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

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

这次我们需要用到node-sass,sass-loader等 LOADER,package.json如下:

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

index.HTML代码如下:

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> Document

猜你在找的JavaScript相关文章