开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
前言
提高工作效率，腾出更多的时间来摸鱼，是我一直的追求的目标。使用更高效的工具，可以帮助我们提高工作效率。所以就让我们一起来探索postcss，看他如何提高我们的工作效率
what is postcss?
PostCSS 不是预处理器（尽管它可以表现得像一个）,他其实是一个node.js工具，A tool for transforming CSS with JavaScript，一个用Javascript转化css的工具
实际上，PostCSS 的主要功能只有两个：
- 第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，
- 第二个就是调用插件来处理 AST 并得到结果。
再用一句话改过postcss,postcss对于css就像babel对于js
what is the advantage of postcss?
- 让你可以在浏览器中使用最新的
css语法，postcss可以帮你转到浏览器可以识别的样式，就像babel可以把es6语法转化为es5一样 postcss的插件可以帮你在样式上添加浏览器厂商的前缀，进行浏览器兼容- 拥有极高的处理性能（3倍以上的处理速度）
- 多样化的功能插件，创建了一个生态的插件系统
postcss与webpack的结合
不结合webpack的知识咱们不就不讲了, 因为官网上有，咱怎么写也写不过官网。
先实现一个最简单的使用postcss-loader的环境
那我们要先明白postcss-loader是用来干什么的?
what is postcss-loader?
它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。
webpack配置
目录如下
需要安装的依赖
npm i webpack webpack-cli css-loader mini-css-extract-plugin postcss-loader -D
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.join(__dirname, './dist'),
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}
]
},
plugins: [new MiniCssExtractPlugin()]
}
index.js
import './index.css';
index.css
.hello {
box-sizing: border-box;
}
package.json中的script配置如下
"scripts": {
"start": "webpack --config webpack.config.js"
},
执行命令
npm start
就可以看到dist下面多出两个文件
查看main.css
/*!***********************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/index.css ***!
\***********************************************************************************************************/
.hello {
box-sizing: border-box;
}
postcss 插件的使用
autoprefixer
autoprefixer: 意思是自动添加前缀
利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。
安装：npm i autoprefixer -D
在postcss.config.js 引入插件
module.exports = {
plugins: [
require('autoprefixer'),
]
}
在package.json添加如下配置
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 1 ie version"
]
}
修改一下index.css文件
.hello {
box-sizing: border-box;
transform: scale(0.5);
}
然后再进行打包
/*!***********************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/index.css ***!
\***********************************************************************************************************/
.hello {
box-sizing: border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
发现为特定浏览器厂商添加了前缀，good
postcss-preset-env
看到这个是不是和babel-preset-env很像呀,它的工作原理和babel-preset-env是一样的，都是把语法转化为当前浏览器能够理解的代码，会根据你的目标浏览器确定你需要的polyfills
postcss-preset-env 已经内置了 autoprefixer、postcss-nesting/postcss-nested(嵌套)、postcss-import(使用import引入css文件) 等相关功能。
所以我们使用postcss-loader完全只需要装一个postcss-preset-env插件就可以满足大部分需求了(相同的是babel-loader也只需要安装babel-preset-env这一个预设就可以了)
接下来我们把autoprefixer去掉，使用postcss-preset-env插件(虽然名字中有预设两个字，但是是一个插件)
打包后，发现文件内容和autoprefixer的效果是一致的，good
/*!***********************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/index.css ***!
\***********************************************************************************************************/
.hello {
box-sizing: border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
