微信号:QunarTL

介绍:Qunar技术沙龙是去哪儿网工程师小伙伴以及业界小伙伴们的学习交流平台.我们会分享Qunar和业界最前沿的热门技术趋势和话题;为中高端技术同学提供一个自由的技术交流和学习分享平台.

postcss开发实战

2019-03-08 09:30 邵裕东

来呀!来呀!关注我吧!!

邵裕东,2018年3月入职Qunar,现任平台事业部大前端技术中心前端开发工程师,负责公司移动端框架hy、qrn的开发维护,nanachi小程序多端转译框架开发。追求前端工程化,喜欢做一切有意义的事。


初识 postcss

css 是 web 开发中重要的一部分,然而 css 规范仍存在一些浏览器兼容性问题,由此出现了 sass、less、stylus 等 css 预处理器,提高了开发人员的效率。 postcss 的官方定义: A tool for transforming CSS with JavaScript. 一个用 javascript 来处理 css 语法的工具。postcss 本身不会对 css 文件进行修改,它只将 css 文件转化为抽象语法树(abstract syntax tree,后简称 ast),然后插件对语法树进行处理,最后由 postcss 将 ast 还原为普通 css,所以 postcss 对 css 文件的修改都是基于插件来实现的。

postcss 可以做什么

截止到目前,postcss 已有200多个插件,列举一些比较出名的插件: 1、autoprefixer 它从 caniuse 网站上的数据,自动添加浏览器前缀到 css 中,帮助开发人员解决浏览器兼容问题。 2、postcss-preset-env 支持 css 的最新特性,并兼容大多数浏览器。 3、postcss-modules 模块化 css 代码,为选择器提供命名空间后缀。 4、precss 解析一些类 sass 语法,包括:变量、嵌套、mixins等。 5、stylelint css 语法检查器,可以帮助开发者检查 css 文件中的语法错误。 更多插件地址:https://github.com/postcss/postcss/blob/master/docs/plugins.md

postcss 用法

postcss 可以与各种前端打包工具相结合使用,例如 webpack、gulp、grunt、rollup...

webpack

 
           
  1. // webpack.config.js

  2. module.exports = {

  3. module: {

  4. rules: [

  5. {

  6. test: /\.css$/,