POSTCSS-LOADER配置簡述

前注：

如果可以，請給本專案加【Star】和【Fork】持續關注。

有疑義請點選這裡，發【Issues】。

DEMO地址

1、概述

postcss-loader 用於處理css程式碼，具有下列特點：

1. 通常由 options 和 plugins 兩部分組成，plugins 雖然巢狀在 options 裡，但實際上是通過其他外掛生效的；
2. 配置是可以獨立的（每個配置的外掛也是獨立的）。詳細介紹閱讀【2.1】；

還有一些自定義配置，但由於篇幅所限，這裡就不像之前那樣詳解每個配置了（主要是很多都依賴於其他東西）。

只寫一些常用功能。

2、配置

2.1、獨立配置

所謂獨立配置，指的是在js檔案中，引入的css檔案如何被postcss-loader解析，取決於和他最近的那一個postcss的設定檔案。

注：

對在css檔案中，通過@import匯入的css檔案無效：

1. 必須是通過通過import引入到js裡面的css檔案，才會被postcss-loader解析生效；
2. 如果是a.css，通過@import './b.css'引入b.css檔案，那麼該配置對a.css生效，對b.css無效；
3. 我查了很多資料，目前沒找到能讓postcss-loader對在css檔案中，通過@import方式匯入其他的css檔案，進行生效的方法。如果有，請提
   issues 給我。

優先順序：

1. 在 webpack.config.js 中的module.rules屬性裡設定的優先順序最高；
2. 然後按順序找，離css檔案最近的postcss.config.js配置檔案，遇見的第一個檔案其次；
3. 按順序找的後面的檔案優先順序最低；
4. 找不到配置會報錯；

注（完）

先假設 webpack.config.js 裡配置方式如下（無任何特殊配置）：

// ...略略略
{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
 

        ]
}   
// ...略略略              

簡單來說，postcss-loader 的配置檔名為：postcss.config.js。

假設檔案樹結構如下：

.
|____app.js
|____webpack.config.js
|____index.html
|____postcss.config.js  // 1#設定檔案
|____style
| |____postcss.config.js    // 2#設定檔案
| |____style.css
|____style2
| |____bar.css
| |____postcss.config.js    // 3#設定檔案

引用（import）結構是：

1. app.js -> style/style.css
2. app.js -> style2/bar.css

假如兩個css檔案都有一條css屬性：box-sizing: border-box;；

然後 style/postcss.config.js （2#)的設定如下（相容性配置）：

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: [
                // 加這個後可以出現額外的相容性字首
                "> 0.01%"
            ]
        })
    ]
}

style2/postcss.config.js (3#)的設定如下（預設配置）：

module.exports = {}

經過postcss-loader的處理之後，有相容性配置的css檔案，其插入html檔案後，css屬性變為如下：

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

無相容性配置的css檔案，其插入html檔案後，css屬性變為如下：

box-sizing: border-box;

說明一點，對於postcss-loader來說，他優先取同目錄下的postcss.config.js的配置屬性。

另外，由於2#和3#設定檔案的存在，因此無論1#如何設定，都不會影響其效果。

假如css檔案找不到同目錄下的postcss.config.js檔案，那麼會依次往上級目錄尋找，直到找到，或者抵達專案根目錄為止（以上面這個目錄結構為例，即webpack.config.js所在目錄是根目錄）

2.2、自定義配置檔案路徑

在上面，我們寫了postcss-loader的配置檔案的使用方式，分別是：【寫在webpack.config.js中】，【配置檔案放在對應的css檔案的同級目錄或者上級目錄】。

但是假如我們需要統一管理 postcss-loader 的配置檔案，那麼就需要通過 config 來處理。

示例程式碼如下：

{
    loader: 'postcss-loader',
    options: {
        config: {
            path: './config'    // 寫到目錄即可，檔名強制要求是postcss.config.js
        }
    }
}

表示會去 webpack.config.js 的同目錄下去找資料夾 config，然後在該資料夾下找到 postcss.config.js 檔案（檔名不能改變），從而讀取配置。

假如這麼寫，會導致【放在對應的css檔案，的同級目錄或者上級目錄，的postcss-loader的配置檔案失效】。原因是優先順序問題。

除此之外，還有一個context設定，略略略。

2.3、sourceMap

測試後，無效（開啟與否檔案大小不變）

3、外掛

除了 autoprefixer 用於加相容性字首，其他基本都有更好的，比如stylelint不如用eslint系列替代。

3.1、autoprefixer

這個是最應該新增的外掛了。

效果是對css檔案新增相容性字首。

安裝：

npm install autoprefixer --save

官方github地址：

使用方式：

// postcss.config.js
let autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [
        autoprefixer({
            browsers: [
                // 加這個後可以出現額外的相容性字首
                "> 0.01%"
            ]
        })
    ]
}

效果：

應該是相容性最強的配置方法了，例如box-sizing可以新增兩個字首，有些特性可以新增三個字首，如下：

轉換前

transform: rotate(0deg);

轉換後：

-webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
        transform: rotate(0deg);

其他特性：

不僅可以新增字首，也可以刪除舊字首（過時字首）等。詳細檢視官方文件。

非特殊要求，直接使用上面這個配置就行了（如果不需要最多的字首，可以把上面的改為

autoprefixer({
            browsers: [
                // 加這個後可以出現額外的相容性字首
                "> 1%"
            ]
        })

3、參考文章