PostCSS 基本用法

一、postcss相關網站

https://www.postcss.com.cn/

https://www.ibm.com/developerworks/cn/web/1604-postcss-css/

二、介紹

PostCSS 的主要功能只有兩個：第一個就是前面提到的把 CSS 解析成 JavaScript 能夠操做的 抽象語法樹結構（Abstract Syntax Tree，AST），第二個就是調用插件來處理 AST 並獲得結果。

PostCSS 通常不單獨使用，而是與已有的構建工具進行集成。PostCSS 與主流的構建工具，如 Webpack、Grunt 和 Gulp 均可以進行集成。完成集成以後，選擇知足功能需求的 PostCSS 插件並進行配置。

Webpack 中使用 PostCSS 插件示例：

var path = require('path');
 
module.exports = {
 context: path.join(__dirname, 'app'),
 entry: './app',
 output: {
   path: path.join(__dirname, 'dist'),
   filename: 'bundle.js'
 },
 module: {
   loaders: [
     {
       test:   /\.css$/,
       loader: "style-loader!css-loader!postcss-loader"
     }
   ]
 },
 postcss: function () {
   return [require('autoprefixer')];
 }
}

postcss-loader 用來對.css 文件進行處理，並添加在 style-loader 和 css-loader 以後。經過一個額外的 postcss 方法來返回所須要使用的 PostCSS 插件。require('autoprefixer') 的做用是加載 Autoprefixer 插件。

三、總結

經過 PostCSS 強大的插件體系，能夠對 CSS 進行各類不一樣的轉換和處理，從而儘量的把繁瑣複雜的工做交由程序去處理，而把開發人員解放出來。