PostCss学习笔记，持续记录

Css 模块

CSS 的隔离主要有两类方案，一类是运行时的通过命名区分，一类是编译时的自动转换 CSS，添加上模块唯一标识。

1. 运行时

运行时的方案最典型的就是 BEM，它是通过 .block__element–modifier 这种命名规范来实现的样式隔离，不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的。

但是这种方案毕竟不是强制的，还是有样式冲突的隐患。

2. 编译时

编译时的方案有两种，一种是 scoped，一种是 css modules（还有 Css in Js）。

• scoped 是 vue-loader 支持的方案，它是通过编译的方式在元素上添加了 data-xxx 的属性，然后给 css 选择器加上 [data-xxx] 的属性选择器的方式实现 css 的样式隔离。
• css-modules 是 css-loader 支持的方案，在 vue、react 中都可以用，它是通过编译的方式修改选择器名字为全局唯一的方式来实现 css 的样式隔离。
• scoped 的方案是添加的 data-xxx 属性选择器，因为 data-xx 是编译时自动生成和添加的，开发者感受不到。
• css-modules 的方案是修改 class、id 等选择器的名字，那组件里就要通过 styles.xx 的方式引用这些编译后的名字，开发者是能感受到的。但是也有好处，配合编辑器可以做到智能提示。

PostCss

1.PostCss 简介

• PostCSS 是一款使用 JavaScript 插件对 CSS 实现转换的工具
• PostCSS 拥有非常强大的插件，典型的比如 autoprefixer、cssnext、css modules 等。
• PostCSS 插件的处理方式类似 CSS 预处理器，而非预处理器和后处理器。
• PostCSS 并非优化 CSS 的工具，语法也并非 CSS 的新式语法。

Github：https://github.com/postcss/postcss#usage

2.vite 中使用

Vite 自身已经集成 PostCSS，无需再次安装。另外也无需单独创建 PostCSS 配置文件，已集成到 vite.config.js 的 css 选项中。可直接配置 css.postcss 选项即可。Vite 将自动在 *.vue 文件中所有的 style 标签以及所有导入的.css 文件中应用 PostCSS.

API 列表：https://postcss.org/api/

import postcssPxtorem from "postcss-pxtorem";
import autoprefixer from 'autoprefixer'

export default {
    // 样式表插件
    css: {
        postcss: {
            plugins: [
                autoprefixer({
                    overrideBrowserslist: [
                        "Android 4.1",
                        "iOS 7.1",
                        "Chrome > 31",
                        "ff > 31",
                        "ie >= 8",
                        "last 10 versions", // 所有主流浏览器最近 10 版本用
                    ],
                    grid: true,
                }),
                postcssPxtorem({
                    rootValue: 37.5,
                    propList: ['*'],
                    unitPrecision: 5
                })
            ]
        }
    }
}

3. 相关插件

3.1 autoprefixer

autoprefixer 用于自动添加 css 产商前缀；

$ npm install autoprefixer --save-dev

3.2 postcsspxtoviewport

$ npm install postcss-px-to-viewport --save-dev

postcsspxtoviewport 可以将 CSS 中的 px 单位转化为 vw，1vw 等于 1 /100 视口宽度。

{
  unitToConvert: 'px',// 需要转换的单位，默认为 "px"
  viewportWidth: 320,// 设计稿的视口宽度
  unitPrecision: 5,// 单位转换后保留的精度
  propList: ['*'],// 能转化为 vw 的属性列表, 支持 * 和! 字符
  viewportUnit: 'vw',// 希望使用的视口单位
  fontViewportUnit: 'vw',// 字体使用的视口单位
  selectorBlackList: [],// 需要忽略的 CSS 选择器，不会转为视口单位，使用原有的 px 等单位。可以使正则表达式，普通字符默认是包含匹配
  minPixelValue: 1,// 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
  mediaQuery: false,// 媒体查询里的单位是否需要转换单位
  replace: true,// 是否直接更换属性值，而不添加备用属性
  /*exclude 和 include 是可以一起设置的，将取两者规则的交集。*/ 
  exclude: undefined,// 正则字符或者数组，忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 
  include: undefined,/ 正则或者数组，只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文 
  landscape: false,// 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) 
  landscapeUnit: 'vw',// 横屏时使用的单位 
  landscapeWidth: 568 // 横屏时使用的单位 
} 

3.3 pxtorem

npm install postcss-pxtorem --save-dev

postcss-pxtorem 可以将 CSS 中的 px 单位转化为 rem。

{
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],// 能转化为 vw 的属性列表, 支持 * 和! 字符
    selectorBlackList: [],// 需要忽略的 CSS 选择器，不会转为视口单位，使用原有的 px 等单位。可以使正则表达式，普通字符默认是包含匹配
    replace: true, 
    mediaQuery: false, // 允许在媒体查询中转换 px。minPixelValue: 0,
    exclude: /node_modules/i
}