npm init

npm install webpack webpack-cli --save-dev

注意：”script“：{“bulid”："webpack --config webpack.config.js"}意思就是說在運行webpack，--config表示指定配置文件，webpack.config.js 配置文件名。

npm run build

npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install postcss-loader --save-dev

npm install autoprefixer --save-dev

npm install stylelint stylelint-config-lost stylelint-config-standard --save-dev

npm install postcss-cssnext --save-dev

npm install postcss-modules --save-dev

npm install lost --save-dev

ostcss 一種對css編譯的工具，類似babel對js的處理，常見的功能如：

1 . 使用下一代css語法

2 . 自動補全瀏覽器前綴

3 . 自動把px代為轉換成rem

4 . css 代碼壓縮等等

postcss 只是一個工具，本身不會對css一頓操作，它通過插件實現功能，autoprefixer 就是其一。

與 less sass 的區別

less sass 是預處理器，用來支持擴充css語法。

postcss 既不是 預處理器也不是 后處理器，其功能比較廣泛，而且重要的一點是，postcss可以和less/sass結合使用

如何使用

這里只說在webpack里集成使用，首先需要 loader

1 . 安裝

npm install postcss-loader –save-dev

2 . webpack配置

一般與其他loader配合使用，下面*標部分才是postcss用到的

配合時注意loader的順序（從下面開始加載）

3 . postcss配置

項目根目錄新建 postcss.config.js文件，里面配置一些插件

注：也可以在webpack中配置

常用的postcss插件

1 . Autoprefixer

前綴補全，全自動的，無需多說

安裝：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下個版本的css語法【關于語法另一篇文章會單獨講】

安裝：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px轉換成rem

安裝：

cnpm install postcss-pxtorem --save-dev

配置項：

特殊技巧:不轉換成rem

px檢測區分大小寫，也就是說Px/PX/pX不會被轉換，可以用這個方式避免轉換成rem

原理

工作流

大致步驟：

1. 將CSS解析成抽象語法樹(AST樹)
2. 將AST樹”傳遞”給任意數量的插件處理
3. 將處理完畢的AST樹重新轉換成字符串

在PostCSS中有幾個關鍵的處理機制：

Source string → Tokenizer → Parser → AST → Processor → Stringifier

Tokenizer

將源css字符串進行分詞

舉個例子：

.className { color: #FFF; }

通過Tokenizer后結果如下：

[
    ["word", ".className", 1, 1, 1, 10]
    ["space", " "]
    ["{", "{", 1, 12]
    ["space", " "]
    ["word", "color", 1, 14, 1, 18]
    [":", ":", 1, 19]
    ["space", " "]
    ["word", "#FFF" , 1, 21, 1, 23]
    [";", ";", 1, 24]
    ["space", " "]
    ["}", "}", 1, 26]
]

以word類型為例，參數如下：

const token=[
     // token 的類型，如word、space、comment
    'word',

    // 匹配到的詞名稱
    '.className',

    // 代表該詞開始位置的row以及column，但像 type為`space`的屬性沒有該值
    1, 1,

    // 代表該詞結束位置的row以及column，
    1, 10
]

Parser

經過Tokenizer之后，需要Parser將結果初始化為AST

this.root={
    type: 'root',
    source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
                   start: { line: 1, column: 1 } ,
                  end: { line: 1, column: 27 }
    },
   raws:{after: "", semicolon: false}
   nodes // 子元素
}

Processor

經過AST之后，PostCSS提供了大量JS API給插件用

Stringifier

插件處理后，比如加瀏覽器前綴，會被重新Stringifier.stringify為一般CSS。

參考：
https://segmentfault.com/a/1190000017886402
https://www.jianshu.com/p/288963680642

作者：指尖跳動
鏈接：https://www.jianshu.com/p/9a9048bc8978
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

析 .postcss.js 配置文件：深入了解 PostCSS 配置

PostCSS 是一個強大的 CSS 處理工具，可以幫助開發者自動化地轉換和優化 CSS。通過.postcss.js 配置文件，你可以定制化地配置 PostCSS 插件和選項，以適應你的項目需求。本文將詳細介紹.postcss.js 配置文件的各個方面，幫助你更好地理解如何配置 PostCSS。

創建 .postcss.js 配置文件

首先，你需要在項目根目錄下創建一個名為.postcss.js 的文件。這個文件將作為 PostCSS 的配置文件，并包含一些用于配置插件和選項的 JavaScript 代碼。

基本配置

一個簡單的.postcss.js 配置文件可能如下所示：

module.exports={
  plugins: [
    'autoprefixer',
    'cssnano'
  ]
};

在這個配置中，我們使用了兩個常用的 PostCSS 插件：autoprefixer 用于自動添加 CSS 前綴，cssnano 用于壓縮和優化 CSS。

插件配置

你可以通過對象形式配置插件，設置插件的選項。例如，配置autoprefixer 插件的瀏覽器支持：

module.exports={
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: ['last 2 versions', '> 5%']
    },
    'cssnano': {}
  }
};

高級配置

在.postcss.js 配置文件中，你還可以使用更多高級選項。以下是一些示例：

使用條件配置

你可以根據不同條件來配置插件。例如，只在生產環境下使用cssnano 插件：

const isProduction=process.env.NODE_ENV==='production';

module.exports={
  plugins: {
    'autoprefixer': {},
    ...(isProduction ? { 'cssnano': {} } : {})
  }
};

鏈式插件配置

有時，你可能想將多個插件配置串聯起來。你可以使用postcss-preset-env 插件來預設多個插件配置：

module.exports={
  plugins: {
    'postcss-preset-env': {
      stage: 1,
      features: {
        'nesting-rules': true
      }
    }
  }
};

使用插件的別名

你可以使用插件的別名來替代插件的名稱，以便更好地管理配置。

module.exports={
  plugins: {
    'autoprefixer': {},
    'cssnano': {},
    'postcss-preset-env': {
      stage: 1,
      features: {
        'nesting-rules': true
      }
    }
  }
};

結語

.postcss.js 配置文件允許你定制化地配置 PostCSS 插件和選項，以滿足不同項目的需求。通過了解基本配置、插件配置、高級選項以及插件的別名使用，你可以更好地掌握如何使用.postcss.js 配置文件，優化你的 CSS 處理流程，提高開發效率。