正文

webpack的postcss的基本应用

IP云
IP云V管理员/5 阅读
08/16
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
  • PostCss是什么？
  • PostCSS在webpack中的基本应用

一、PostCss是什么？

如果有深入学习PostCss需求的话可以参考大漠的资料：https://www.w3cplus.com/blog/tags/516.html

大概来说postcss是一个用来处理css的系统程序，它不是css语处理器，也不是css后处理后处理器，也不是新的语法，也不是优化工具。postcss本身只做两件事，将css转换成css抽象语法树，可以简单的理解为将css转换成js；postcss做的第二件事就是调用插件来处理抽象语法树，通过插件实现对css的处理。

这篇博客只是postcss的基本应用，并不对postcss的实现原理以及插件开发做任何解析。通常现在使用postcss的处理css前缀的插件有postcss-cssnext和autoprefixer，postcss-cssnext包含了autoprefixer的添加前缀功能，还具备处理css未来的语法特性；比较常用的插件还有cssnano用来压缩css代码。

二、PostCss在webpack中的基本应用

工作区间文件结构

//工作区间
src//文件夹
demo.less
index.js
index.html
package.json
webpack.config.js

需要的模块：

//除了必备webpack webpack-cli打包工具必备的插件和处理模块
npm install less less-loader --save-dev //处理less
npm install css-loader postcss postcss-loader cssnano postcss-cssnext autoprefixer --save-dev//集成postcss
npm mini-css-extract-plugin --save-dev//生成css文件

webpack.config.js配置文件：关键在于配置postcss，要将它放在less-loader和css-loader中间。

var path = require("path");
const PurifyCSSPlugin = require('purifycss-webpack');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-[hash:5].bundle.js"
},
module: {
rules: [
{
test: /\.less$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
// require('autoprefixer')(),//添加前缀
require('postcss-cssnext')(),//添加前缀 转换css未来语法
require('cssnano')({
preset: 'default'
}),
]
}
},
{ loader: 'less-loader' }],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name]-[hash:5].css",
})
]
}

其他文件的代码：

*{
margin: 0;
padding: 0;
}
body{
background-color: #f00;
.wrapper{
position: absolute;
width: 300px;
height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid #3addff;
border-radius: 10px;
background-color: #3acfaa;
display: flex;
justify-content: center;
align-items: center;
.box{
width:160px;
height: 160px;
background: #92d000;
border-radius: 10px;
line-height: 160px;
span{
display: inline-block;
width: 100%;
color: #3acfaa;
font-size: 32px;
text-align: center;
font-weight: 600;
text-shadow: -3px -3px 1px #000,1px 1px 3px #fff;
}
}
} }

less代码

import './demo.less';

js代码

<!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>
<!--注意生成的css文件名-->
<link rel="stylesheet" href="./dist/index-5fde8.css">
</head>
<body>
<div class="wrapper">
<div class="box">
<span>SPAN</span>
</div>
</div>
</body>
</html>

HTML代码

最后注明以下关于postcss-cssnext的未来语法处理在测试代码中没有相关的语法处理，用下面的代码来说明一下：

:root{
--color:red;
}
a{
color:var(--color);
}

上面这些代码在浏览器中还不能直接被解析，可以通过postcss-cssnext转换。

注意，如果使用postcss并使用cssnano优化压缩css代码的话，在plugins中就不能配置PurifyCSSPlugin来做css tree shaking操作，因为PurifyCSSPlugin会导致原本被cssnano压缩的代码会有恢复到了非压缩状态，这两个插件是冲突的。