【构建工具】PostCSS快速配置

古狼（Jenkin_guwolf）2024-03-19 16:38

1. 安装依赖包

bash 复制代码

npm i -D postscss postcss-cli
npm i -D autoperfixer postcss-preset-env 
npm i -D stylelint stylelint-config-standard
npm i -D postcss-pxtorem

// 执行命令 npx postcss style.css -o dist.css

postcss // PostCSS核心包
postcss-cli // PostCSS命令行
autoprefixer // autoprefixer插件
postcss-preset-env // preset-env插件，转换嵌套css语法
stylelint // 检查css语法的插件
stylelint-config-standard // stylelint一些基本的规则
postcss-pxtorem // 将px单位转换成rem

2. PostCSS配置

javascript 复制代码

// postcss.config.js
const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');
const stylelint = require('stylelint');
const postcssPxtorem = require('postcss-pxtorem')

module.exports = {
  plugins: [
    stylelint,
    autoprefixer,
    postcssPresetEnv({
      stage: 0,
    }),
    postcssPxtorem,
  ]
}

.stylelintrc.json
{
  "extends": "stylelint-config-standard"
}


// .browserslistrc
cover 99.5%

3. 总结

浏览器兼容性是前端开发常遇到的问题，现代前端构建工具已经可以帮我们处理很多兼容问题，比如：Babel语法转换和polyfill可以解决JavaScript层面的大部分兼容问题，而PostCSS的autoprefixer以及语法转换可以解决CSS层面的大部分兼容问题。