测试环境
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:
输入 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
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"], };
