需求

１希望能夠讓開(kāi)發(fā)者寫(xiě)代碼更輕松

以往沒(méi)有引入postcss autoprefixer之前，我們?yōu)榱薱ss相關(guān)特性能夠在各個(gè)瀏覽器上的兼容，引入了scss，利用它的mixins來(lái)實(shí)現(xiàn)prefix。但是每一個(gè)mixin　都有一個(gè)自己的語(yǔ)法。

比如以往，如果我們我們想要寫(xiě)一條

div {
    display: flex;
    align-items: center;
    justify-content: center;
}

為了各個(gè)相對(duì)早期瀏覽器的prefix，我們需要mixin，然后這樣寫(xiě)

import 'common/flexbox';

div {
    @include flexbox;
    @flex(1);
    @justify-content(center);
}

然后按照這樣的約定，來(lái)加上需要的prefix。

這當(dāng)然是一個(gè)方法，但是對(duì)于開(kāi)發(fā)者來(lái)講，實(shí)際上增加了一些學(xué)習(xí)成本，而且相當(dāng)于將標(biāo)準(zhǔn)放到了一邊，去使用另外一套標(biāo)準(zhǔn)。

我們之前的mixin，由于已經(jīng)有好幾年的歷史。當(dāng)時(shí)為了兼容市面上那些還有很大市場(chǎng)份額的瀏覽器，prefix寫(xiě)的很全。比如下面這個(gè)mixin　flexbox到代碼:

@mixin flexbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

為了寫(xiě)這篇博客，我又確認(rèn)了一下，那個(gè)mixin flexbox的開(kāi)源庫(kù)來(lái)自于2013年，距離現(xiàn)在已經(jīng)五年了,五年的時(shí)間，淘汰了很多過(guò)時(shí)的瀏覽器，五年前可能需要兼容到ie8，現(xiàn)在移動(dòng)端開(kāi)發(fā)甚至完全可以無(wú)需理睬IE的存在，所以這樣的一套prefix就顯得有些過(guò)時(shí)了。那位說(shuō)了，我更新我的mixin不就好了，比如在2018年做移動(dòng)端開(kāi)發(fā)，也許我只需要將上面的代碼改寫(xiě)成:

@mixin flexbox {
    display: -webkit-flex;
    display: flex;
}

但是我們也許需要想地更遠(yuǎn)一些，也許再過(guò)兩年，我們甚至不需要對(duì)-webkit-的支持了。那時(shí)候，難道我們又要改一遍這個(gè)mixin嗎？

postcss解決了這樣一個(gè)痛點(diǎn)，可以直接書(shū)寫(xiě)標(biāo)準(zhǔn)的css（現(xiàn)在是css3，但是過(guò)幾年也可能就是css4了），我們有了這樣的工具，再指定一個(gè)瀏覽器兼容表，就能夠?qū)崿F(xiàn)自動(dòng)prefix，而這相比于sass/scss　mixin的方式，維護(hù)起來(lái)更加簡(jiǎn)單，應(yīng)該是一個(gè)很好的實(shí)踐。

２對(duì)用戶更友好

這當(dāng)然也是顯而易見(jiàn)的，以前我們可能為了兼容更多瀏覽器，而寫(xiě)更多的prefix，可是隨著時(shí)間的推移，很多prefix完全并不需要。我們通過(guò)postcss來(lái)處理，簡(jiǎn)單明了，縮小了生成的css文件的體積，最后反映到用戶那里，會(huì)快上一丟丟！

步驟

1 安裝postcss-loader ,postcss-preset-env

yarn add -D postcss-loader  postcss-preset-env

安裝postcss-preset-env，無(wú)需再安裝autoprefixer，由于postcss-preset-env已經(jīng)內(nèi)置了相關(guān)功能。

２　添加.browserlistrc　文件到項(xiàng)目根目錄

1% in CN
android >= 4.4
ios >= 8
not ie <= 11

這個(gè)需要根據(jù)項(xiàng)目的世紀(jì)情況來(lái)自由選擇，我是考慮我們的項(xiàng)目是移動(dòng)端項(xiàng)目，且確實(shí)有用戶在用Android４.4　或者ios８，但是再很難看到低于這些版本之下的系統(tǒng)了。

３配置postcss.config.js

module.exports = {
  loader: 'postcss-loader',  
  plugins: {
      'postcss-preset-env': {},
    }
}

4　配置webpack.config.js

{
test: /\.scss$/,
use:[ 
    MiniCssExtractPlugin.loader,
    {
        loader: 'css-loader',
            options: {
                root: 'static',
                minimize: true,
                importLoaders: 1
            }
    },
    'postcss-loader',
    'sass-loader',
]
},
{
test: /\.css$/,
use: [
    MiniCssExtractPlugin.loader,
    {
        loader: 'css-loader',
            options: {
                root: 'static',
                minimize: true,
                importLoaders: 1
            }
    },
    'postcss-loader'
]
}

由于我們的項(xiàng)目中使用了scss，因此需要sass-loader。這里需要注意各個(gè)loader的順序，一開(kāi)始我的順序是MiniCssExtractPlugin.loader,css-loader，sass-loader，　postcss-loader，結(jié)果發(fā)現(xiàn)并沒(méi)有能夠autoprefix，原因是如果想讓postcss-loader認(rèn)識(shí)并且處理，需要先用sass-loader進(jìn)行處理，轉(zhuǎn)化成postcss-loader可以認(rèn)識(shí)的代碼。

另外需要注意的是，我們這里還在使用css-loader v0.28，目前已經(jīng)有了v1.0，版本改動(dòng)很大，以至于我們暫時(shí)不能升級(jí)。