Vue3自定义PostCss插件

插件功能: 实现自动转px为vw功能

px 固定单位,不会随着屏幕的变化而变化
vh vw 相对于视口高宽进行控制

1. 创建插件ts文件

2. tsconfig.node.json引入插件

"include": [
    "vite.config.ts",
    "plugins/**/*"
  ]

3. vite.config.ts增加插件配置

import { PostCssToViewport } from './plugins/postcss-px-to-viewport'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ],
  css:{
    //配置自定义postcss插件
    postcss:{
      plugins:[PostCssToViewport()]
    },
  },
  })

4. 编写插件内容

//postcss插件
import { Plugin } from "postcss"

const Options = {
  viewportWidth: 375,//默认视口宽度
}
interface Options {
  viewportWidth?:number
}

export const PostCssToViewport = (options:Options = Options):Plugin =>{
  const opt = Object.assign({},Options,options);
  return {
    postcssPlugin: 'postcss-px-to-viewport',
    //钩子函数
    Declaration(node){
      //判断需要转换的单位
      if(node.value.indexOf('xm') != -1){
        console.log(node.prop,node.value);
        const num = parseFloat(node.value);
        node.value = `${((num / opt.viewportWidth)*100).toFixed(2)}vw`
      }
      
    }
  }
}

插件会将样式中是自定义单位(xm)装换为vw

5. 示例

<template>
  <div>
    <header class="header">
      <div>left</div>
      <div>center</div>
      <div>right</div>
    </header>
  </div>
</template>

<script setup lang=ts>
import {ref} from 'vue'

</script>

<style scoped lang="less">

.header{
  display: flex;
  
  div{
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-align: center;
  }
  div:nth-child(1){
    width:100xm;
    background-color: #f00;
  }
  div:nth-child(2){
    flex:1;
    background-color: #0f0;
  }
  div:nth-child(3){
    width: 100xm;
    background-color: #00f;
  }
}
</style>