webpack4 处理SCSS的方法示例


Posted in Javascript onSeptember 03, 2018

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

1. 准备工作

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

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

webpack4 处理SCSS的方法示例

这次我们需要用到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 预处理语言,所以我们要检查下打包后的结果,打开控制台,如下图所示:

webpack4 处理SCSS的方法示例

同时,对于其他的 css 预处理语言,处理方式一样,首先应该编译成 css,然后交给 css 的相关 loader 进行处理。

处理sass文件

1.安装sass和sass-loader

cnpm i node-sass sass-loader -D

创建一个src/sass/a.sass文件

$color:green;

#div2{
color: $color;
}
module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滚
use:'css-loader',
publicPath:'../' //解决css背景图的路径问题
})
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分离less编译后的css文件
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 这里的options选项参数可以定义多大的图片转换为base64
limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
outputPath:'images' //定义输出的图片文件夹
}
}]
}
]
},

自动添加css前缀

postCss 预处理器

专门处理css平台

1.下载

cnpm i postcss-loader autoprefixer -D

2.准备建一个 postcss.config.js文件 配置postcss的

module.exports = {
plugins:[
require('autoprefixer') // 自动添加css前缀
]
}

3.配置postcss-loader,自动添加css前缀

module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滚
use:[
{loader:'css-loader'},
{loader:'postcss-loader'} //利用postcss-loader自动添加css前缀
],
publicPath:'../' //解决css背景图的路径问题
})
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分离less编译后的css文件
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 这里的options选项参数可以定义多大的图片转换为base64
limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
outputPath:'images' //定义输出的图片文件夹
}
}]
}
]
},

自动消除冗余的css代码

使用Purifycss

1.下载

cnpm i purifycss-webpack purify-css -D

2.引入插件

const PurifyCssWebpack = require('purifycss-webpack');

3.需要引入一个额外模块,glob扫描路径

cnpm i glob -D

4.引入glob

const glob = require('glob');

5.在plugins里面配置

plugins:[
// Uglify是压缩js,现在已经不需要了,只需要在script里面写成
// "build": "webpack --mode production", 就自动压缩额
//new Uglify(), 
new Webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'Hello World',
template: './src/index.html' //模板地址
}),
new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
new PurifyCssWebpack({ //消除冗余代码
// 首先保证找路径不是异步的,所以这里用同步的方法
// path.join()也是path里面的方法,主要用来合并路径的
// 'src/*.html' 表示扫描每个html的css
paths:glob.sync(path.join(__dirname,'src/*.html')) 
})
]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
javascript版2048小游戏
Mar 18 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
老生常谈ES6中的类
Jul 31 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 #Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 #Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 #Javascript
详解jQuery中的easyui
Sep 02 #jQuery
vue-cli脚手架的安装教程图解
Sep 02 #Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 #Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 #Javascript
You might like
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP文件上传类实例详解
2016/04/08 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php Session无效分析资料整理
2016/11/29 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
php实现登录页面的简单实例
2019/09/29 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
python相似模块用例
2016/03/04 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python 动态加载的实现方法
2017/12/22 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
两则小学生的自我评价分享
2013/11/14 职场文书
化工工艺设计求职信
2014/06/25 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书