PostCSS 学习

[vivipure]

介绍

postcss是 css 的 babel, 用来处理css的转换

npm i postcss

配置文件

postcss.config.js

module.exports = {
    plugins: [
        require('...')
    ]
}

插件

插件搜索： https://www.postcss.parts/

1. cssnano

yarn add cssnano

功能: 压缩css

2. autoprefixer

yarn add autoprefixer

功能： 自动添加浏览器兼容前缀 需要配置package.json 中的 browserslist,可以根据需求配置比例

"browserslist": {
    "cover 99.5%"
}

3. postcss-preset-env

https://preset-env.cssdb.org/

yarn add postcss-preset-env

功能： 支持新的语法，向下兼容

// postcss.config.js
...
require('postcss-preset-env')({
stage: 0,
})
...

## 4. postcss-pxtorem

yarn add postcss-pxtorem

功能： 自动转化px为 rem

// postcss.config.js ... require('postcss-pxtorem')({ rootValue: 16, unitPrecision: 5, propList: ['font', 'font-size', 'line-height', 'letter-spacing'], selectorBlackList: [], replace: true, mediaQuery: false, minPixelValue: 0, exclude: /node_modules/i }) ...