vite中配置postcss与postcss-plugin-px2rem

说明

• vite中默认集成了postcss所以我们直接使用postcss的配置即可；

安装依赖

• autoprefixer postcss 最核心的插件，支持自动追加浏览器兼容前缀，帮助解决样式兼容性问题
• postcss-plugin-px2rem 前端自适应方案插件，支持exclude过滤不想编译的文件夹或文件

npm i autoprefixer postcss-plugin-px2rem -D

填写配置

根目录创建 postcss.config.js

module.exports = {
  plugins: [
    require("autoprefixer"),
    require("postcss-plugin-px2rem")({
      rootValue: 19.2, //换算基数，1rem相当于10px,值为37.5时,1rem为20px,淘宝的flex默认为1rem为10px
      // unitPrecision: 5, //允许REM单位增长到的十进制数字。
      //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
      propBlackList: ['font-size', 'border'], //黑名单
      exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      // selectorBlackList: [], //要忽略并保留为px的选择器
      // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
      // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
      mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
      minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
    }),
  ],
};

src文件夹中创建 utils/dom.ts

import _ from 'lodash'


// 以1920px 底图为准开发页面
export const setDomFontSize = (): void => {
  let width = document.documentElement.clientWidth || document.body.clientWidth;
  let fontsize = (width <= 1200 ? 1200 : width) / 100 + 'px';
  (document.getElementsByTagName('html')[0].style as any)['font-size'] = fontsize;
}

let setDomFontSizeDebounce = _.debounce(setDomFontSize, 400)
window.addEventListener('resize', setDomFontSizeDebounce); // 浏览器加入收缩监听防抖，重新计算rem配置

• TODO 想想如何用闭包缓存fontsize，方便后续在js中使用style内联样式计算rem值；
• 注意缓存监听函数，不要重复创建resize监听函数

src/main.ts

...
import {setDomFontSize} from './utils/dom'
setDomFontSize()

• 大佬可以探讨下是否需要在DOMContentLoaded阶段再执行

运行项目

npm run dev

查看效果

• rem生效，但是浏览器内核兼容性前缀未加上；原因是少了browserslist配置 目前postcss官方推荐两种配置方式
  1.根目录创建 .browserslistrc

# Browsers that we support

last 2 versions
> 1%
iOS 7
last 3 iOS versions

2.package.json文件加入配置项 browserslist

{
  ...
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ],
}

• 这里我采取第一种方案，重启项目 运行成功，f12控制台css代码展示正常。