Postcss
yuhuo2022-12-05开发库样式库
一. 命令行工具
1. 安装
# 安装 postcss 和命令行工具
npm install --save-dev postcss postcss-cli
# 安装插件
npm install --save-dev autoprefixer
npm install --save-dev postcss-import
npm install --save-dev postcss-pxtorem
npm install --save-dev postcss-px-to-viewport
npm install --save-dev cssnano
2. 配置文件
postcss.config.js（项目根目录）
// 自动补齐前缀插件
const autoprefixer = require("autoprefixer");
// 导入其他css文件
const postcssImport = require("postcss-import");
// px转vw
const pxtoviewport = require("postcss-px-to-viewport");
// px转rem
// const pxtorem = require("postcss-pxtorem");
// 压缩css代码
// const cssnano = require("cssnano");
module.exports = {
// 引入插件
plugins: [
autoprefixer,
postcssImport,
pxtoviewport({viewportWidth: 750}),
// pxtorem({
// rootValue: 75, // px和rem的比例
// propList: ["*"], // 要转换的属性
// }),
// cssnano
],
};
说明
rem适配：
- 使用 postcss-pxtorem 插件，使得 75px = 1rem
- 通过 JavaScript 设置 html 的 font-size = 屏幕宽度 / 10，即屏幕宽度 = 10 rem
- 最终实现：750px => 屏幕宽度
vw适配：
- 使用 postcss-px-to-viewport 插件，使得 750px = 100vw
- 100vw 为屏幕宽度，无须设置，更加方便
- 最终实现：750px => 屏幕宽度
3. 执行编译
# -o, --output 编译到指定文件
npx postcss src/demo.css -o dist/demo.css
# -d, --dir 编译到指定文件夹
npx postcss src/*.css -d dist/
# -r, --replace 编译并替换源文件
npx postcss src/*.css -r
# -w, --watch 监听并编译
npx postcss src/*.css -d dist/ -w
源文件
/* main.css */
.main {
width: 75px;
}
/* demo.css */
@import url(./main.css);
.demo {
transform: translate(100px);
}
生成文件
.main {
width: 10vw;
}
.demo {
-webkit-transform: translate(13.33333vw);
-ms-transform: translate(13.33333vw);
transform: translate(13.33333vw);
}
二. postcss API
const postcss = require("postcss");
const autoprefixer = require("autoprefixer");
const pxtoviewport = require("postcss-px-to-viewport");
let plugin = [autoprefixer, pxtoviewport({ viewportWidth: 750 })];
let sourceCode = `body { width: 100px; }`;
// 传入插件和源css代码，进行编译
let targetCode = await postcss(plugin).process(sourceCode).css
三. 基于 webpack
通过 postcss-loader 传入插件对象，postcss-loader 内部再调用 postcss API 去进行编译。
const autoprefixer = require("autoprefixer");
const pxtoviewport = require("postcss-px-to-viewport");
module.exports = {
module: {
rules: [
{
test: /\.(scss|sass|css)$/i,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
autoprefixer,
pxtoviewport({ viewportWidth: 750 })
],
},
},
},
],
}
],
}
}
四. 浏览器配置
.browserslistrc（项目根目录）
last 5 version
>1%
ie>=8
或者在 package.json 添加 browserslist 字段
"browserslist": [
"last 5 version",
">1%",
"ie>=8"
]
配置说明
| 范围 | 说明 |
|---|---|
last 2 versions | 每个浏览器的最后 2 个版本 |
> 1% | 全球使用率大于1% |
cover 99.5% | 覆盖99.5%主流浏览器 |
chrome > 50ie 9-11 | 指定某个版本的浏览器 |
not ie < 11 | 排除ie11 以下版本 |
since 2013last 2 years | 某个时间范围发布的所有浏览器版本 |
maintained node versions | 所有被node基金会维护的node版本 |
current node | 当前环境node版本 |
dead | 不再维护或两年没有更新的版本的浏览器 |
not dead | 排除 dead 的浏览器 |
Firefox ESR | 最新的 Firefox 扩展支持版本 |
defaults | 默认配置，> 0.5% last 2 versions Firefox ESR not dead |