一：PostCss是什么？
? PostCss是一個(gè)樣式處理工具，它通過(guò)自定義的插件和工具生態(tài)體系來(lái)重新定義css。它鼓勵(lì)開(kāi)發(fā)者使用規(guī)范的css原生語(yǔ)法編寫代碼，然后配置編譯器轉(zhuǎn)換需要兼容的瀏覽器版本，最后通過(guò)編譯將源碼轉(zhuǎn)換為目標(biāo)瀏覽器可用的css代碼。

它和stylus的不同之處是它可以通過(guò)插件機(jī)制靈活地?cái)U(kuò)展其支持的特性，不像stylus的語(yǔ)法是固定的，它的用途非常多，比如css自動(dòng)加前綴，使用下一代css語(yǔ)法等等。

postcss官方有很多插件，查看插件(https://github.com/postcss/postcss/blob/HEAD/README-cn.md), 下面我們先看下postcss在webpack構(gòu)建配置，及分別講下常見(jiàn)的插件的用法。

二：在webpack中使用postcss

比如我們使用stylus來(lái)編寫css代碼，因此文件就是這樣的文件 文件名.styl了，因此該文件需要依次經(jīng)過(guò)stylus-loader, postcss-loader css-loader, style-loader編譯。因此需要如下配置：

{test: /\.styl$/,use: [{loader: 'style-loader',options: {}},{loader: 'css-loader',options: {}},{loader: 'postcss-loader',options: {}},{loader: 'stylus-loader',options: {}}] }

如上配置，所以要在webpack上配置上如上css的編譯器，因此我們需要安裝如上編譯器：如下命令：

npm install --save-dev style-loader css-loader postcss-loader stylus-loader

安裝完成后，我們就在webpack加上postcss配置，代碼如下：

module.exports = {module: {rules: [{// 使用正則去匹配test: /\.styl$/,use: ExtractTextPlugin.extract({use: [{loader: 'style-loader',options: {}},{loader: 'css-loader',options: {}},{loader: 'postcss-loader',options: {}},{loader: 'stylus-loader',options: {}}]})}]} }

在打包之前，我們還是看看我們項(xiàng)目整個(gè)目錄結(jié)構(gòu)如下：

### 目錄結(jié)構(gòu)如下： demo1 # 工程名 | |--- dist # 打包后生成的目錄文件 | |--- node_modules # 所有的依賴包 | |--- js # 存放所有js文件 | | |-- demo1.js | | |-- main.js # js入口文件 | | | |--- webpack.config.js # webpack配置文件 | |--- index.html # html文件 | |--- styles # 存放所有的css樣式文件 | | |-- main.styl # main.styl文件 | | |-- index.styl | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel轉(zhuǎn)碼文件

styles/main.styl 代碼如下：

@import "./index.styl"; #app font-size 18pxwidth 200pxheight 200pxdisplay flex

styles/index.styl 代碼如下：

body font-size 12px

js/main.js 代碼如下：

import '../styles/main.styl';

然后運(yùn)行 打包命令 npm run dev 后，報(bào)如下錯(cuò)誤：

因此我們這邊除了要安裝 stylus-loader 外，還需要把stylus包安裝；如下安裝命令：

npm install stylus --save-dev

安裝完成后，我們進(jìn)行運(yùn)行 npm run dev ，發(fā)下還是報(bào)錯(cuò)了；如下所示：

提示 No PostCSS Config found 這樣的錯(cuò)誤，通過(guò)百度搜索，據(jù)說(shuō)在項(xiàng)目中的根目錄下，新建一個(gè) postcss.config.js 文件，然后里面添加一個(gè)如下簡(jiǎn)單的代碼即可：

module.exports = {};

然后我們?cè)龠\(yùn)行 npm run dev 后，接著又發(fā)下報(bào)如下錯(cuò)誤：如下圖所示：

然后繼續(xù)搜索答案，發(fā)現(xiàn)配置styl文件配置貌似有問(wèn)題，需要如下配置即可：

module.exports = {module: {rules: [{// 使用正則去匹配test: /\.styl$/,use: ExtractTextPlugin.extract({fallback: {loader: 'style-loader'},use: [{loader: 'css-loader',options: {}},{loader: 'postcss-loader',options: {}},{loader: 'stylus-loader',options: {}}]})}]} }

再繼續(xù)運(yùn)行代碼就沒(méi)有報(bào)錯(cuò)了。但是如上代碼僅僅配置了postcss，但是并沒(méi)有使用內(nèi)部的插件，因此我們需要把對(duì)應(yīng)的一些常用的插件加上，比如 autoprefixer 自動(dòng)添加前綴，cssnano 壓縮css代碼，postcss-cssnext css的下一代，使用css4的新語(yǔ)法等等。
目前先安裝這幾個(gè)插件吧，如下命令安裝：

npm install --save-dev autoprefixer cssnano postcss-cssnext

現(xiàn)在webpack配置改為如下即可：

module.exports = {module: {rules: [{// 使用正則去匹配test: /\.styl$/,use: ExtractTextPlugin.extract({fallback: {loader: 'style-loader'},use: [{loader: 'css-loader',options: {}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('autoprefixer')(),require('postcss-cssnext')(),require('cssnano')()]}},{loader: 'stylus-loader',options: {}}]})}]} }

配置如上完成后，我們繼續(xù)使用 npm run dev 打包，可以看到如下提示：

提示 postcss-cssnext 已經(jīng)包含了 autoprefixer 插件的功能，因此在webpack需要把 autoprefixer 去掉即可。因此我們繼續(xù)打包運(yùn)行即可：如下圖所示：

在頁(yè)面上看下 main.css 代碼如下：

這說(shuō)明postcss通過(guò)插件支持添加了兼容性前綴，并且可以使用那些尚未被瀏覽器所支持的css語(yǔ)法，比如變量,calc()等。這里注意的是在使用postcss-cssnext時(shí)就不要使用autoprefixer插件，因?yàn)閜ostcss-cssnext包含了autoprefixer插件。

三：postcss-pxtorem插件將px轉(zhuǎn)換成rem
1. 要使用該插件，首先需要安裝，如下命令：

npm install --save-dev postcss-pxtorem

2. 在webpack中集成 postcss-pxtorem， 如下代碼配置：

module.exports = {module: {rules: [{// 使用正則去匹配test: /\.styl$/,use: ExtractTextPlugin.extract({fallback: {loader: 'style-loader'},use: [{loader: 'css-loader',options: {}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('postcss-cssnext')(),require('cssnano')(),require('postcss-pxtorem')({rootValue: 100,propWhiteList: []})]}},{loader: 'stylus-loader',options: {}}]})}]} }

如上代碼配置 postcss-pxtorem 后，再運(yùn)行 npm run dev 后，就可以看到如下圖所示，代碼px已經(jīng)轉(zhuǎn)換成rem了。

如上通過(guò)使用px編寫代碼就能轉(zhuǎn)換成rem了，但是有時(shí)候我們并不想轉(zhuǎn)換，比如1px的邊框等等這樣的，我還是想使用px來(lái)表達(dá)的話，那么我們可以把px寫成 Px 或 PX來(lái)解決，如下代碼所示：

postcss-pxtorem 的具體配置如下所示：

require('postcss-pxtorem')({rootValue: 75,unitPrecision: 5,propList: ['*'],selectorBlackList: [],replace: true,mediaQuery: false,minPixelValue: 12 })

假設(shè)設(shè)計(jì)稿750寬;
rootValue為75，說(shuō)是對(duì)根元素大小進(jìn)行設(shè)置.
unitPrecision為5,是轉(zhuǎn)換成rem后保留的小數(shù)點(diǎn)位數(shù).
selectorBlackList則是一個(gè)對(duì)css選擇器進(jìn)行過(guò)濾的數(shù)組，比如你設(shè)置為['fs']，那例如fs-xl類名，里面有關(guān)px的樣式將不被轉(zhuǎn)換，
這里也支持正則寫法。
minPixelValue的選項(xiàng)，我設(shè)置了12，意思是所有小于12px的樣式都不被轉(zhuǎn)換.
propList是一個(gè)存儲(chǔ)哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為['*']全部，假設(shè)需要僅對(duì)邊框進(jìn)行設(shè)置，可以寫['*', '!border*']意思是排除帶有border的屬性.

四：postcss-sprites 雪碧圖的合并
1. 安裝命令如下：

npm install --save-dev postcss-sprites

2. 在webpack配置如下：

module.exports = {module: {rules: [{// 使用正則去匹配test: /\.styl$/,use: ExtractTextPlugin.extract({fallback: {loader: 'style-loader'},use: [{loader: 'css-loader',options: {}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('postcss-cssnext')(),require('cssnano')(),require('postcss-pxtorem')({rootValue: 100,propWhiteList: []}),require('postcss-sprites')()]}},{loader: 'stylus-loader',options: {}}]})}]} }

如上postcss-sprites代碼，我們?cè)賮?lái)測(cè)試下代碼，如下main.styl代碼如下：

@import "./index.styl"; #app font-size 18pxwidth 200pxheight 200pxdisplay flexborder 1PX solid #ccc.test1width 50%height 400pxbackground url('../images/0001.png') no-repeat 0 0.test2width 50%height 200pxmargin-top 20pxbackground url('../images/0002.png') no-repeat 0 0

然后我們打包文件后，main.css變?yōu)槿缦?#xff1a;

postcss所有插件查看（https://github.com/postcss/postcss/blob/HEAD/README-cn.md），可以根據(jù)自己的需要可以在項(xiàng)目中打包進(jìn)去。

下面是所有的webpack.config.js 代碼如下：

const path = require('path'); // 提取css的插件 const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ClearWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: './js/main.js',output: {filename: 'bundle.js',// 將輸出的文件都放在dist目錄下path: path.resolve(__dirname, 'dist'),publicPath: '/dist'},mode: 'development',module: {rules: [{// 使用正則去匹配test: /\.styl$/,use: ExtractTextPlugin.extract({fallback: {loader: 'style-loader'},use: [{loader: 'css-loader',options: {}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('postcss-cssnext')(),require('cssnano')(),require('postcss-pxtorem')({rootValue: 100,unitPrecision: 5,propWhiteList: []}),require('postcss-sprites')()]}},{loader: 'stylus-loader',options: {}}]})},{test: /\.(png|jpg)$/,loader: 'url-loader',options: {limit: 10000,name: '[name].[ext]'}},{test: /\.js$/,exclude: /(node_modules)/, // 排除文件loader: 'babel-loader'}]},resolve: {// modules: ['plugin', 'js'] },externals: {jquery: 'jQuery'},devtool: 'source-map',devServer: {// contentBase: path.join(__dirname, "dist"),port: 8081,host: '0.0.0.0',headers: {'X-foo': '112233'},// hot: true,inline: true,// open: true,overlay: true,stats: 'errors-only'},plugins: [// new ClearWebpackPlugin(['dist']),new ExtractTextPlugin({// 從js文件中提取出來(lái)的 .css文件的名稱 filename: `main.css`})] };

package.json 變?yōu)槿缦?#xff1a;

{"name": "demo1","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline","build": "webpack --progress --colors --devtool cheap-module-source-map"},"author": "","license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-plugin-transform-runtime": "^6.23.0","babel-preset-env": "^1.7.0","babel-preset-stage-2": "^6.24.1","clean-webpack-plugin": "^0.1.19","css-loader": "^1.0.0","cssnano": "^4.0.5","extract-text-webpack-plugin": "^4.0.0-beta.0","file-loader": "^1.1.11","path": "^0.12.7","postcss-cssnext": "^3.1.0","postcss-loader": "^3.0.0","postcss-pxtorem": "^4.0.1","postcss-sprites": "^4.2.1","style-loader": "^0.21.0","stylus": "^0.54.5","stylus-loader": "^3.0.2","uglifyjs-webpack-plugin": "^1.2.7","url-loader": "^1.0.1","webpack": "^4.16.1","webpack-cli": "^3.0.8","webpack-dev-server": "^3.1.4"},"dependencies": {"axios": "^0.18.0","http-proxy-middleware": "^0.18.0","jquery": "^3.3.1"} }

?

總結(jié)

以上是生活随笔為你收集整理的深入浅出的webpack构建工具---PostCss(五)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。