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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JavaScript中的细节分析
Jun 30 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
详解javascript数组去重问题
Nov 06 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
前端vue如何使用高德地图
Nov 05 Javascript
vue实现树状表格效果
Dec 29 Vue.js
解决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数字转汉字代码(算法)
2011/10/08 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
js验证密码强度解析
2020/03/18 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python制作一个桌面便签软件
2015/08/09 Python
Python实现定时任务
2017/02/08 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python用户管理系统
2018/03/13 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
平面设计岗位职责
2013/12/14 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
个人党性分析材料
2014/12/19 职场文书
2016年学校招生广告语
2016/01/28 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技