css 预编译的理念与 babel 有一定的相通之处,最重要的区别就是:预编译语法并非规范的 css,而是各成一派。用预编译语法编写的源代码不能在任何宿主浏览器中运行。从这个角度考虑,css 预编译更像 coffescript、typescript 等 js 的超集。

可以预见的是,如果未来 css 规范退出来预编译类似的特性和语法,这些预编译器都将成为历史的尘埃。postcss 则反其道而行之,从理念上更加接近 babel,业内有人称其为「css 的 babel」。

postcss 鼓励开发者使用规范 css 原生语法编写源代码,然后配置编译器需要兼容的浏览器版本,最后经过编译将源码转化为目标浏览器可用的 css 代码。postcss 提供了丰富的插件用于实现不同场景的编译需求,比如最常用的 autoprefixer、sprites 等,编译流程如下所示:

1
2
3
4
       |---------------------------------------------|
css => | 解析 => plugin 1 => plugin 2 => ... => 序列化 | => css(new)
|---------------------------------------------|
postcss

总的来说,postcss 并不是另一种 css 预编译器,与 sass、less 等预编译器页并不冲突。

要说 postcss,则要先来说一下 autoprefixerautoprefixer-loader

autoprefixer

该插件可以帮你在样式代码中添加浏览器前缀,让你写样式时更加轻松和专注,所要做的,就是配置一下所需兼容的浏览器版本和种类列表。

再来看看其在 npm 官网上的自我介绍:

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Taobao.

说白了它就是一个 postcss 的插件。

autoprefixer-loader

它是一个用于 webpack 工程的 loader。

其在 npm 官网上的注意事项:

⚠️ This module is deprecated. Autoprefixer official page recommends using postcss-loader instead.

也即它被废弃不维护了,官方推荐使用 postcss-loader 来替代。

postcss

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins, 编译尚未被浏览器广泛支持的先进的 CSS 语法,内联图片,以及其它很多优秀的功能。

其下有很多插件,可以到插件列表中搜索自己想要的插件。

postcss-loader

它是一个用于 webpack 工程的,用来处理 CSS 的 loader。

在 webpack 中使用 postcss-loader

1. 创建 postcss.config.js

在项目根目录下创建 postcss.config.js,比如我只需要用到 autoprefixercssnano 功能

1
2
3
4
5
6
7
8
9
10
// postcss.config.js
module.exports = ({ file, options, env }) => ({
indent: 'postcss',
plugins: {
// 自动补全浏览器前缀
'autoprefixer': true,
// 优化、压缩 CSS 代码
'cssnano': env === 'production',
}
});

2. 配置 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js
{
test: /\.less$/,
include: SRC_PATH,
use: extractLESS.extract(['css-loader', 'postcss-loader', 'less-loader']),
// use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
// use: extractLESS.extract([
// { loader: 'css-loader', options: { sourceMap: true } },
// { loader: 'postcss-loader', options: { sourceMap: true } },
// { loader: 'less-loader', options: { sourceMap: true } },
// ]),
},

3. 在 package.json 文件里添加支持的浏览器版本和型号区间

1
2
3
4
5
6
7
8
9
10
11
/* package.json */
{
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}

参考资料

谈谈PostCSS
postcss|github仓库
postcss插件列表|github仓库
postcss-loader|github仓库