本文介绍在 Webpack4 中配置 SCSS 和 Sass 编译的方法，重点解析 sass-loader 与 css-loader 的执行顺序。同时涵盖 PostCSS 插件 autoprefixer 的配置，实现 CSS 前缀自动添加，以及使用 PurifyCSS 消除冗余代码的完整步骤。
Webpack4 处理 SCSS 基础配置
本节介绍在 Webpack4 环境中处理 SCSS 样式文件的具体方法。核心思路是在原有的 CSS 处理配置基础上，添加用于编译 SCSS 的 LOADER 即可实现。
1. 准备工作
为简化说明过程，示例代码目录中仅包含一个 SCSS 文件，旨在帮助读者聚焦于核心 LOADER 的使用逻辑。
下图展示了本次示例的代码目录结构： 目录结构
本例需要安装 node-sass 和 sass-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 预处理语言的处理方式也相同：先通过对应的预处理器 LOADER 将其编译为标准 CSS，再交由 CSS 相关的 LOADER 进行后续处理。
Sass 与 PostCSS 进阶处理
处理 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 -D2. 准备创建 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 -D2. 引入插件
const PurifyCssWebpack = require('purifycss-webpack');3. 需要引入一个额外模块，利用 glob 扫描路径
cnpm i glob -D4. 引入 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'))
})
]以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。