Skip to content

Latest commit

 

History

History
46 lines (27 loc) · 1.57 KB

13. postcss.md

File metadata and controls

46 lines (27 loc) · 1.57 KB

postcss

vite天生对postcss有非常良好的支持

全屋净水系统有一个了解

水龙头里来的水是自来水

自来水 从 管道里 先到这个全屋净水系统 给全屋净水系统做一些插槽 ---> 去除砂砾 --> 净化细菌微生物 ---> ... --> 输送到水龙头 --> 我们可以喝的纯净水 (为了保证到我们嘴里喝的水是万无一失)

postcss 他的工作基本和全屋净水系统一致: 保证css在执行起来是万无一失的

都对postcss有一个误区: 他们认为postcss和less sass是差不多级别

我们写的css代码(怎么爽怎么来) --> postcss ---> less --> 再次对未来的高级css语法进行降级 --> 前缀补全 --> 浏览器客户端

目前来说 less和sass等一系列预处理器的postcss插件已经停止维护了 less插件 你自己去用less和sass编译完了, 然后你把编译结果给我

所以业内就产生了一个新的说法: postcss是后处理器 less的postcss的插件就ok了

我们写的js代码(怎么爽怎么来) --> babel --> 将最新的ts语法进行转换js语法 --> 做一次语法降级 --> 浏览器客户端去执行

babel --> 帮助我们让js执行起来万无一失

class App {} // es6的写法

function App() {} // es3的语法

浏览器的兼容性你能考虑到吗, 预处理器并不能够解决这些问题:

  1. 对未来css属性的一些使用降级问题
  2. 前缀补全: Google非常卷 --webkit

使用postcss

  1. 安装依赖
yarn add postcss-cli postcss -D
  1. 书写描述文件

postcss配置文件的格式

  • postcss.config.js