Vue3自定义PostCss插件

Vue3自定义PostCss插件

      • [插件功能: 实现自动转px为vw功能](#插件功能: 实现自动转px为vw功能)
    • [1. 创建插件ts文件](#1. 创建插件ts文件)
    • [2. tsconfig.node.json引入插件](#2. tsconfig.node.json引入插件)
    • [3. vite.config.ts增加插件配置](#3. vite.config.ts增加插件配置)
    • [4. 编写插件内容](#4. 编写插件内容)
    • [5. 示例](#5. 示例)

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

px 固定单位,不会随着屏幕的变化而变化

vh vw 相对于视口高宽进行控制

1. 创建插件ts文件

2. tsconfig.node.json引入插件

javascript 复制代码
"include": [
    "vite.config.ts",
    "plugins/**/*"
  ]

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

javascript 复制代码
import { PostCssToViewport } from './plugins/postcss-px-to-viewport'

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

4. 编写插件内容

javascript 复制代码
//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. 示例

javascript 复制代码
<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>
相关推荐
编程猪猪侠23 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞27 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架