【构建工具】PostCSS快速配置

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
  1. postcss // PostCSS核心包
  2. postcss-cli // PostCSS命令行
  3. autoprefixer // autoprefixer插件
  4. postcss-preset-env // preset-env插件,转换嵌套css语法
  5. stylelint // 检查css语法的插件
  6. stylelint-config-standard // stylelint一些基本的规则
  7. 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层面的大部分兼容问题。

相关推荐
今晚吃什么呢?8 分钟前
前端面试题之CSS中的box属性
前端·css
我是大龄程序员11 分钟前
Babel工作理解
前端
《独白》21 分钟前
将图表和表格导出为PDF的功能
javascript·vue.js·ecmascript
CopyLower25 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ26 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
什码情况26 分钟前
微服务集成测试 -华为OD机试真题(A卷、JavaScript)
javascript·数据结构·算法·华为od·机试
你的人类朋友1 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵1 小时前
JavaScript 空对象检测
javascript
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js