PostCSS 学习笔记

Question

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
	})
...