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 进行各种不同的转换和处理, 从而尽可能的把繁琐复杂的工作交由程序去处理, 而把开发人员解放出来.
来源: http://www.bubuko.com/infodetail-2573637.html