- 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中间。
1 var path = require("path"); 2 const PurifyCSSPlugin = require('purifycss-webpack'); 3 var MiniCssExtractPlugin = require("mini-css-extract-plugin"); 4 module.exports = { 5 entry: { 6 index: './src/index.js', 7 }, 8 output: { 9 path: path.resolve(__dirname, "dist"), 10 filename: "[name]-[hash:5].bundle.js" 11 }, 12 module: { 13 rules: [ 14 { 15 test: /.less$/, 16 use: [ 17 { loader: MiniCssExtractPlugin.loader }, 18 { loader: 'css-loader' }, 19 { 20 loader: 'postcss-loader', 21 options: { 22 ident: 'postcss', 23 plugins: [ 24 // require('autoprefixer')(),//添加前缀 25 require('postcss-cssnext')(),//添加前缀 转换css未来语法 26 require('cssnano')({ 27 preset: 'default' 28 }), 29 ] 30 } 31 }, 32 { loader: 'less-loader' }], 33 } 34 ] 35 }, 36 plugins: [ 37 new MiniCssExtractPlugin({ 38 filename: "[name]-[hash:5].css", 39 }) 40 ] 41 }
其他文件的代码：
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 body{ 6 background-color: #f00; 7 .wrapper{ 8 position: absolute; 9 300px; 10 height: 300px; 11 left: 50%; 12 top: 50%; 13 transform: translate(-50%,-50%); 14 border: 1px solid #3addff; 15 border-radius: 10px; 16 background-color: #3acfaa; 17 display: flex; 18 justify-content: center; 19 align-items: center; 20 .box{ 21 160px; 22 height: 160px; 23 background: #92d000; 24 border-radius: 10px; 25 line-height: 160px; 26 span{ 27 display: inline-block; 28 100%; 29 color: #3acfaa; 30 font-size: 32px; 31 text-align: center; 32 font-weight: 600; 33 text-shadow: -3px -3px 1px #000,1px 1px 3px #fff; 34 } 35 } 36 } 37 38 }
1 import './demo.less';
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <!--注意生成的css文件名--> 9 <link rel="stylesheet" href="./dist/index-5fde8.css"> 10 </head> 11 <body> 12 <div class="wrapper"> 13 <div class="box"> 14 <span>SPAN</span> 15 </div> 16 </div> 17 </body> 18 </html>
最后注明以下关于postcss-cssnext的未来语法处理在测试代码中没有相关的语法处理，用下面的代码来说明一下：
1 :root{ 2 --color:red; 3 } 4 a{ 5 color:var(--color); 6 }
上面这些代码在浏览器中还不能直接被解析，可以通过postcss-cssnext转换。
注意，如果使用postcss并使用cssnano优化压缩css代码的话，在plugins中就不能配置PurifyCSSPlugin来做css tree shaking操作，因为PurifyCSSPlugin会导致原本被cssnano压缩的代码会有恢复到了非压缩状态，这两个插件是冲突的。