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 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
js密码强度校验
Nov 10 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
浅谈JS的二进制家族
May 09 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动态变静态原理
2006/11/25 PHP
php 信息采集程序代码
2009/03/17 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
js生成随机数的方法实例
2015/10/16 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python自动化生成IOS的图标
2018/11/13 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
浅析matlab中imadjust函数
2020/02/27 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
J2EE包括哪些技术
2016/11/25 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
在职研究生自我鉴定
2013/10/16 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
小学数学课题方案
2014/06/15 职场文书
2014年体育工作总结
2014/11/24 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技