背景

CSS工程化关注的问题：

组织
优化
构建
维护

功能

主要是对CSS做一些解析和转换的工作

PostCSS的意思和CSS预处理器的含义相反，预处理器是把不是CSS的语言变成CSS，而PostCSS是在CSS的基础上经过PostCSS转换(做模块化、加前缀、处理兼容性问题)再输出一个新的CSS

PostCSS本身只有解析能力，各种神奇的特性全靠插件

常用的插件

import：模块合并(减少http请求，提高加载的性能)
autoprefixier: 自动加前缀
cssnano：压缩代码
cssnext：使用css新特性(已被弃用)
precss: 变量、minxin、循环等(被弃用 )

基本使用

这里postcss只能对代码进行解析

1.项目中安装使用

安装： npm install postcss-cli

使用： ./node_modules/.bin/postcss xxx.css -o yyy.css

2.全局中安装使用

全局安装：npm install postcss-cli -g

使用： postcss xxx.css -o yyy.css

使用插件

postcss中的插件

npm安装插件

autoprefixer插件

如果想要给代码加前缀，怎么使用autoprefixer？

=> 创建postcss.config.js的配置文件( 引用插件 )

const autofrefix = require('autofrefix')

module.exports = {
    plugins:[
        autofrefix({
            browsers:['last 2 versions']  // 指定兼容哪些浏览器
        })
    ]
}

由于这里引入了npm的模块autoprefixer，所以需要安装依赖 npm i autoprefixer

例子

/*demo.css*/
*{
    padding: 0;
    margin: 0   ;
}
.box{
    box-shadow:  0 0 3px rgba(255,255,255,0.3);
    
/*postcss.config.js*/    

const autoprefixer = require('autoprefixer')

module.exports = {
    plugins:[
        autoprefixer({
            browsers:['last 2 versions']  // 指定兼容所有最近2个版本的浏览器
        })
    ]
}

运行 postcss demo.css -o out.css后输出：

/*out.css*/
*{
    padding: 0;
    margin: 0   ;
}
 
/*autoprefixer帮我们加上了支持浏览器的前缀*/
.box{
    -webkit-box-shadow:  0 0 3px rgba(255,255,255,0.3);
            box-shadow:  0 0 3px rgba(255,255,255,0.3);
}

从中可以看出浏览器为我们的css加上了浏览器兼容的前缀

备注：

1.指定浏览器兼容的条件可以是:浏览器的种类、浏览器的版本、市场份额、地区、具体的版本、时间

2.autoprefixer的数据来源是 Can I use

3.指定兼容浏览器的参数配置参考browserslist

除了autoprefixer之外，比如css中使用@import引入了reset.css，这样加载就会有2个请求，能不能合并呢？可以使用插件'postcss-import'

cssnano插件

1.同之前的一样引入依赖cssnanonpm i cssnano

2.postcss的配置文件中初始化

/*postcss.config.js*/  

const autoprefixer = require('autoprefixer')
const cssnano = require('cssnano')

module.exports = {
    plugins:[
        autoprefixer({
            browsers:['last 2 versions']
        }),
        cssnano
    ]
    
}

3.运行postcss demo.css -o out.css

/*demo.css*/

*{
    padding: 0;
    margin: 0   ;
}
.box{
    box-shadow:  0 0 3px rgba(255,255,255,0.3);
}
body{
    margin: 10px 20px 10px 20px;
    font-size: 20px;
}
body{
    background: #ffffff;
}

/*out.css*/
*{margin:0;padding:0}.box{-webkit-box-shadow:0 0 3px hsla(0,0%,100%,.3);box-shadow:0 0 3px hsla(0,0%,100%,.3)}body{background:#fff;font-size:20px;margin:10px 20px}

从中可以看出postcss的插件cssnano帮我们进行了代码的压缩，把margin被压缩成了简写形式;2个body的样式被压缩到了一起

PostCSS支持的构建工具

上面说的本身CLI命令行工具
webpack： postcss-loader
Gulp: gulp-postcss
Grunt: grunt-postcss
Rollup: rollup-postcss

postcss作为css处理工具本身并不擅长构建工作，因此它选择同其他构建工具合作进行，他可以用在非常多的构建工具中

CSS 工程化 - PostCSS

背景

功能