【构建工具】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层面的大部分兼容问题。

相关推荐
Vicky&James4 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_748233647 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟16 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386317 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596017 分钟前
前端代理,解决跨域问题讲解
前端
quitv22 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238131 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星33 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端