vite-PostCss

简介

1 .主要是对css做一些解析和转换的工作
2 .postCss是在css的基础上，对css进行转换。模块化，加前缀，处理兼容性。然后输出一个新的css
3 .postCss标准化。使用流行的normalize.css的某些部分来初始化html默认样式
4 .可以将css解析成抽象语法树
5 . 通过转换成的抽象语法树，暴露出的api可以让我们对这些css进行操作，也就是会说我们可以使用js来开发插件了

6 .一些基础必备的操作

1 .变量。这个可以用原生的
2 .作用域。这个可以用css module
3 .嵌套
*   添加支持PostCSS的混合宏、变量以及条件支持。
*   探索代码嵌套的不同方式，如BEM和PostCSS的嵌套。
*   使用PostCSS优化媒体查询，获得最佳性能。
*   使用PostCSS处理器给元素，如图像、字体、网格、SVG和高清图像添加样式。*   熟悉使用插件和使用PostCSS API扩展插件。
*   定制自己的处理器并在不同的网站上测试，比如WordPress。
*   在PostCSS中编写一个自定义语法，如类似Sass、LESS或Stylus处理器的语法。
*   提供对未来的CSS特性（如CSS4特性和一些CSS3特性）的支持。著作权归作者所有。
4 .压缩css
5 .代码审查

7 .PostCss 运行机制

1 .postcss 本身并不会处理任何具体的任务，只有加了各种插件才有功能
2 .postcss 会将css代码解析成包含一系列节点的抽象语法树。树上的每一个节点都是css代码中的某个属性的符号化表示
3 .编译后的抽象语法树会被传递给后续的插件做进一步的处理。

image.png

常用的插件

1 .import:模块合并，减少http请求，提高加载的性能
2 .autoprefixier:自动加前缀 https://github.com/browserslist/browserslist
3 .cssnano:压缩代码
4 .插件列表 https://github.com/postcss/postcss/blob/main/docs/plugins.md
5 .https://postcss.org/

目前用到的插件配置

plugins:[
        postcsspxtoviewport({
          unitToConvert:'px',
          viewportWidt:730,
          // 设计稿的宽度
          unitPrecision:1,
          landscape:true,
        }),
//将px转为vw
        postcssPresetEnv(
          {importFrom:path.resolve(__dirname,'./variable.css')}
        ),
autofrefix({
            browsers:['last 2 versions']  // 指定兼容哪些浏览器
//根据can i use 上面的数据
        })
        // 自动补全都能做，autoprefixer这个插件的功能
      ]

css module 简单举例

1 .正常的使用

//example.css

.article {
    font-size: 14px;
}
.title {
    font-size: 20px;
}

2 .编译之后的操作

{
    "article": "zxcvb",
    "title": "zxcva"
}

.zxcvb{
    font-size: 14px;
}
.zxcva{
    font-size: 20px;
}

3 .使用编译之后的类名

import style from 'style.json';

class Example extends Component{
    render() {
        return (
            <div classname={style.article}>
                <div classname={style.title}></div>
            </div>
        )
    }
}