webpack4 处理SCSS的方法示例
这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。
1. 准备工作
为了方便叙述，这次代码目录的样式文件只有一个scss文件，以帮助我们了解核心 LOADER 的使用。
下图展示了这次的目录代码结构： 目录结构
这次我们需要用到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 预处理语言，所以我们要检查下打包后的结果，打开控制台，如下图所示：
同时，对于其他的 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'))
})
]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解webpack之scss和postcss-loader的配置
本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **
-
webpack4 处理SCSS的方法示例
这节课讲解webpack4中处理scss.只需要在处理css的配置上增加编译scss的 LOADER 即可. 1. 准备工作 为了方便叙述,这次代码目录的样式文件只有一个scss文件,以帮助我们了解核心 LOADER 的使用. 下图展示了这次的目录代码结构: 目录结构 这次我们需要用到node-sass,sass-loader等 LOADER,package.json如下: { "devDependencies": { "css-loader": "^1.
-
webpack4 处理CSS的方法示例
这节课讲解webpack4中打包css的应用.v4 版本和 v3 版本并没有特别的出入. 1. 准备工作 众所周知,CSS 在 HTML 中的常用引入方法有<link>标签和<style>标签两种,所以这次就是结合webpack特点实现以下功能: 将 css 通过 link 标签引入 将 css 放在 style 标签里 动态卸载和加载 css 页面加载 css 前的transform 下图展示了这次的目录代码结构: 这次我们需要用到css-loader,file-loader等
-
Webpack打包字体font-awesome的方法示例
使用webpack构建font-awesome或者bootstrap的时候,最常见的一个问题就是构建字体文件的问题.经常会出现无法找到字体文件的问题.下面就讲一下如何正确构建引入字体文件: 1. 首先安装依赖: 复制代码 代码如下: npm install style-loader css-loader file-loader font-awesome-webpack --save-dev 2. 在入口文件中引入font-awesome require('font-awesome-webpack
-
vue + elementUI实现省市县三级联动的方法示例
本文介绍了vue + elementUI实现省市县三级联动的方法示例,分享给大家,具体如下: 1.首先需要准备省市县json文件,网上有很多可以下载.项目中使用的city.json数据是这样的格式: [ { "value": "110000", "label": "北京市", "children": [ { "value": "110000", "label
-
vue+elementUI实现内嵌table的方法示例
在大四实习工作中碰到一个比较特别的需求,要求在一个 table 表格中点击一条数据的编号,在该条数据下方出现一个新的 table 表格.这个需求在 element UI 的官方文档中也有案例,以下是参考了其他博客(找不到博客地址了)和 element UI 之后的最终实现效果. 效果图 不知道是公司电脑比较拉,还是软件问题导致录制出来的动态图很卡,但是在实际操作并不会卡. 代码: 页面显示代码: 主要代码在于 <el-table-column type="expand" widt
-
基于vue+echarts 数据可视化大屏展示的方法示例
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm
-
oracle中decode函数的使用方法示例
decode的几种用法 1:使用decode判断字符串是否一样 DECODE(value,if1,then1,if2,then2,if3,then3,...,else) 含义为 IF 条件=值1 THEN RETURN(value 1) ELSIF 条件=值2 THEN RETURN(value 2) ...... ELSIF 条件=值n THEN RETURN(value 3) ELSE RETURN(default) END IF sql测试 select empno,decode(empn
-
Oracle数据行拆分多行方法示例
工作和学习中常常会遇到一行要分割成多行数据的情况,在此整理一下做下对比. 单行拆分 如果表数据只有一行,则可以直接在原表上直接使用connect by+正则的方法,比如: select regexp_substr('444.555.666', '[^.]+', 1, level) col from dual connect by level <= regexp_count('444.555.666', '\.') + 1 输出结果: COL ---- 444 555 666 多行拆分 如果数据表
-
swift 3.0中实现字符串截取、比较的方法示例
前言 字符串处理一直都是程序开发中不可避免的,而字符串截取/替换操作更是频繁.swift3.0 中不能直接使用下标数字进行字符串解决,只能使用String.Index来做位置索引,要想实现截取功能首先得获取到String.Index; 下面话不多说了,来一起看看详细的介绍吧. 实例代码 下面两段代码获取开头可结尾,获取中间部分参数用Range<Index>即可: 获取结尾两个字符子串: let sessionId = "this is a test" let index =
-
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl