- 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 width: 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 width:160px; 22 height: 160px; 23 background: #92d000; 24 border-radius: 10px; 25 line-height: 160px; 26 span{ 27 display: inline-block; 28 width: 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壓縮的代碼會有恢復到了非壓縮狀態，這兩個插件是沖突的。