目录
- 使用 postcss
- 使用插件 autoprefixer
- 配置文件 postcss.config.js
- 使用插件 postcss-preset-env
- 使用 stylelint
- 使用插件 stylelint
- 使用插件 postcss-pxtorem
- 完整配置
CSS 界的 Babel，能够转译 CSS 代码，通过一些列插件增强浏览器兼容性，并让开发者提前用上新特性
| 插件或库 | 说明 | 网址 |
| postcss | Transforming styles with JS plugins | 官网、github |
| postcss-cli | CLI for postcss | github |
| postcss.parts | A searchable catalog of PostCSS plugins | 官网 |
| browserslist | The config to share target browsers and Node.js versions between different front-end tools. | github |
| autoprefixer | Parse CSS and add vendor prefixes to rules by Can I Use | github |
| postcss-preset-env | convert modern CSS into something most browsers can understand | github |
| stylelint | A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. | 官网、github |
测试环境
node -v v16.14.0
使用 postcss
安装
pnpm i -D postcss postcss-cli
package.json
{ "type": "module", "devDependencies": { "postcss": "^8.4.16", "postcss-cli": "^10.0.0" } }
运行命令
npx postcss style.css -o dist.css
输入 style.css
.box { box-sizing: border-box; }
输出 dist.css
.box { box-sizing: border-box; } /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJkaXN0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ib3gge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuIl19 */
使用插件 autoprefixer
安装
pnpm i -D autoprefixer
npx postcss style.css -o dist.css -u autoprefixer
运行完命令发现，并没有什么改变，原因是css语法已经兼容了默认指定浏览器的版本，并不需要额外的处理
调试模式
npx autoprefixer --info
设置要兼容的浏览器版本
package.json
{ "browserslist": [ "cover 99.5%" ] }
不输出sourcemaps
npx postcss style.css -o dist.css -u autoprefixer --no-map
输出，可以看到已经增加了浏览器前缀
.box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
配置文件 postcss.config.js
postcss.config.js
import autoprefixer from "autoprefixer"; export default { map: false, plugins: [autoprefixer], };
使用了配置文件后，可以简化命令行
npx postcss style.css -o dist.css
使用插件 postcss-preset-env
安装
pnpm i -D postcss-preset-env
配置文件 postcss.config.js
import autoprefixer from "autoprefixer"; import postcssPresetEnv from "postcss-preset-env"; export default { map: false, plugins: [ autoprefixer, postcssPresetEnv({ stage: 0, }), ], };
关于stage:
| 阶段 | 名称 | 说明 |
| Stage 0 | 脑袋风暴阶段 | 高度不稳定，可能会发生变化。 |
| Stage 1 | 实验阶段 | 也非常不稳定，可能会发生变化，但是该提案已得到 W3C 成员的认可。 |
| Stage 2 | 承认阶段 | 高度不稳定并且可能会发生变化，但是正在积极研究中。 |
| Stage3 | 拥抱阶段 | 稳定且变化不大，此功能可能会成为标准。 |
| Stage4 | 标准阶段 | 最终的解决方案，所有主流浏览器都支持。 |
输入 style.css
.box { box-sizing: border-box; &:hover{ color: #ffffff; } }
输出 dist.css
.box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .box:hover{ color: #ffffff; }
使用 stylelint
pnpm install --save-dev stylelint stylelint-config-standard
配置文件 stylelint.config.cjs
module.exports = { extends: ["stylelint-config-standard"], };
$ npx stylelint style.css style.css 4:9 ✖ Expected single space before "{" block-opening-brace-space-before 5:12 ✖ Expected "#ffffff" to be "#fff" color-hex-length 2 problems (2 errors, 0 warnings)
修复问题
.box { box-sizing: border-box; &:hover{ /* color: #ffffff; */ color: #fff; } }
$ npx stylelint style.css style.css 4:9 ✖ Expected single space before "{" block-opening-brace-space-before 1 problem (1 error, 0 warnings)
关闭冲突规则
pnpm i -D stylelint-config-prettier
stylelint.config.cjs
module.exports = { extends: ["stylelint-config-standard", "stylelint-config-prettier"], };
使用插件 stylelint
postcss.config.js
import stylelint from "stylelint"; export default { plugins: [ stylelint({ fix: true }), ], };
使用插件 postcss-pxtorem
package.json 增加脚本
{ "scripts": { "build": "postcss style.css -o dist.css" } }
安装
pnpm i -D postcss-pxtorem
配置 postcss.config.js
import pxtorem from "postcss-pxtorem"; export default { plugins: [ pxtorem ], };
font-size: 15px; // 输出 font-size: 0.9375rem;
完整配置
$ tree -I node_modules . ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── src │ └── style.css └── stylelint.config.cjs
package.json
{ "type": "module", "scripts": { "build": "postcss src/**/*.css --dir dist", "dev": "postcss src/**/*.css --dir dist --watch" }, "devDependencies": { "autoprefixer": "^10.4.8", "postcss": "^8.4.16", "postcss-cli": "^10.0.0", "postcss-preset-env": "^7.7.2", "postcss-pxtorem": "^6.0.0", "stylelint": "^14.10.0", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^27.0.0" }, "browserslist": [ "cover 99.5%" ] }
postcss.config.js
import autoprefixer from "autoprefixer"; import stylelint from "stylelint"; import postcssPresetEnv from "postcss-preset-env"; import pxtorem from "postcss-pxtorem"; export default { // 不生成 sourcemaps map: false, plugins: [ // 语法校验 stylelint({ fix: true, // 自动修复 }), // 自动添加浏览器前缀 autoprefixer, // 使用新语法 postcssPresetEnv({ stage: 0, }), // 单位转换：px->rem pxtorem, ], };
stylelint.config.cjs
module.exports = { extends: ["stylelint-config-standard", "stylelint-config-prettier"], };
