# PostCSS工具
## PostCSS工具介绍
1. PostCSS是通过JavaScript来转换样式的工具
2. 这个工具可以帮助我们进行一些css的转换和适配，比如自动添加浏览器前缀、css样式重置
3. 实现上面的功能，需要借助PostCSS对应的插件
4. 使用分为2个步骤：
1、查找PostCSS在构建工具中的扩展，如webpack中的postcss-loader
2、选择可以添加你需要的PostCSS相关的插件
## 命令行单独使用，不依赖webpack等打包工具
1. 安装postcss和postcss-cli `npm install postcss -D`、`npm install postcss-cli -D` // cli：command line interface ，命令行接口
postcss-cli 是 postcss 的命令行工具，如果不使用命令行，可以不安装 postcss-cli
2. 安装postcss的添加前缀工具：`npm install autoprefixer -D`
autoprefixer 依赖于 postcss
3. 运行 `npx postcss --use autoprefixer -o ./src/css/test-fixed.css ./src/css/test.css`
-o输出 test-fixed.css 为输出文件 test.css 为源文件
postcss在处理css时，会根据 browserslist 列出的浏览器进行解析
## webpack配置，以 autoprefixer 插件为例
1. 安装postcss `npm install postcss -D`
2. 安装postcss-loadder `npm install postcss-loadder -D` // postcss-loadder 让 webpack 去找 postcss，对文件进行处理，但并不会加前缀等操作
3. 安装依赖于postcss的相关工具，如 autoprefixer `npm install autoprefixer -D`
4. 配置 webpack.config.js 文件:
```
module: {
rules: [
{
test: /\.css$/, // 匹配规则
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
// 以下为 postcss 的固定写法
postcssOptions: {
plugins: [
// 可能依赖多个插件，两种写法
// require('autoprefixer') // require可以实现插件传参
'autoprefixer'
]
}
}
}
]
},
]
}
```
autoprefixer 仅仅根据浏览器添加前缀
postcss-preset-env 还可以将一些现在的特性转成过去浏览器能理解的范畴
## webpack配置，以 postcss-preset-env 插件为例
### postcss-preset-env介绍
1. 完全替代 autoprefixer，因为安装 postcss-preset-env 会自动安装 autoprefixer，因为 postcss-preset-env 部分功能依赖 autoprefixer，因为
2. 可以帮助我们将一些现代的css特性转成大多数浏览器认识的css，例如#123456，写成#12345678（78表示透明度），它就会转成rgba形式，并且会根据目标浏览器或运行时环境添加所需的polyfill
### webpack 使用 postcss-preset-env
1. 安装 postcss-preset-env：`npm install postcss-preset-env -D`
2. webpack.config.js 配置
module: {
rules: [
{
test: /\.css$/, // 匹配规则
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
// 以下为 postcss 的固定写法
postcssOptions: {
plugins: [
// 可能依赖多个插件，两种写法
// require('postcss-preset-env') // require可以实现插件传参
'postcss-preset-env'
]
}
}
}
]
},
]
}
### 如果less、css、sass都需要用到，可以定义个公共文件将postcss的配置抽离出去，具体如下：
1. webpack配置：
```
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './build')
},
module: {
rules: [
{
test: /\.css$/, // 匹配规则
use: [
// 必须先 postcss-loader，然后 css-loader，否则会报错
'style-loader',
'css-loader',
'postcss-loader' // 配置抽离到 postcss.config.js 文件了
]
},
{
test: /\.less$/,
use: [
// 必须先 postcss-loader，然后 css-loader，否则会报错
'style-loader',
'css-loader',
'postcss-loader', // 配置抽离到 postcss.config.js 文件了
'less-loader'
]
}
]
}
}
```
2. 根目录新建 postcss.config.js，注意：名字不能乱写，会自动读取
```
module.exports = {
plugins: [
require('postcss-preset-env')
]
}
```
# 解决css文件中，@import引入，postcss-loader不处理的问题：
```
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './build')
},
module: {
rules: [
{
test: /\.css$/, // 匹配规则
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1 // 表示 css-loader 处理完，处理css中的@import引入的文件，会回头再次调用 postcss-loader 处理一遍，有几个loader，写几个
}
},
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2 // 表示 css-loader 处理完，处理css中的@import引入的文件，会回头再次调用 postcss-loader、less-loader 处理一遍，有几个loader，写几个
}
},
'postcss-loader',
'less-loader'
]
}
]
}
}
```