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

相关推荐
用户14567756103713 分钟前
亲测好用!简单实用的图片尺寸调整工具
前端
索西引擎14 分钟前
npm、yarn、pnpm
前端·npm·node.js
天生我材必有用_吴用1 小时前
Vue3 + VitePress 搭建组件库文档平台(结合 Element Plus 与 Arco Design Vue)—— 超详细图文教程
前端
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San301 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
ttyyttemo1 小时前
Column,rememberScrollState,记住滚动位置
前端
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
vortex52 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人2 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine2 小时前
JS Entry和 HTML Entry
前端