PostCSS 基本用法

1、postcss相關網站

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

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

2、介紹

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 插件。

3、總結

通過 PostCSS 強大的插件體系，可以對 CSS 進行各種不同的轉換和處理，從而盡可能的把繁瑣復雜的工作交由程序去處理，而把開發人員解放出來。