Vue学习记录之二十 postcss自定义插件及Unocss的使用

一、实例1 使用postCss自定义px转vw插件

编写css插件:
一、在项目根目录下建立一个plugins文件夹，然后建立一个postcss-px-to-viewport.ts文件。

//vite 内置了postCss 无需安装
import {
    Plugin } from 'postcss'
//定义一个变量
const Options = {
   
    viewportWidth: 375, //UI设计稿上的宽度，这里我们默认的视口宽度 375
}
//定义变量类型
interface Options{
   
    viewportWidth:number
}
export const PostCsspxToViewport = (options:Options=Options):Plugin => {
   
    //ES6 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
    const opt = Object.assign({
   },Options,options)   //其实返回的结果是  { viewportWidth: 375 }
    //Plugin必须返回一个对象, 定义一个postcssPlugin。
    return {
   
        postcssPlugin:'postcss-px-to-viewport',
        //钩子函数，要拿到css所有节点,这时候用到 Declaration钩子
        Declaration(node){
   
            //px 转化为 vw
            //console.log(node.prop, node.value)  //prop相当于key,对应的值就是value
            if(node.value.includes('px')){
   
            	/*
            	上面检测所有含有px的，如果有的我不想转换怎么办那，可以自己定义一个如
            	includes('lvmabna'), 那么我们在写css的时候，如果想让转换的就使用lvmanba,如
            	width:40lvmanba, 这样可以根据我们的要求进行转换。
            	*/
                //console.log(node.prop, node.value)
                const num = parseFloat(node.value) //主要是取消px，获取到一个number
                //套用公式(取2位小数)
                node.value = `${
     ((num / opt.viewportWidth)*100).toFixed(2)}vw`
                console.log(node.value)
            }
        }
    }
}

二、在tsconfig.node.json 文件的
include中加入

“plugins/**/*”

compilerOptions中加入

“noImplicitAny”: false //容许隐式的any

三、引入插件
在vite.config.ts 文件,或独立uno.config.ts文件。

import {
    fileURLToPath, URL } from 'node:url'

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
//第一步：引入
import {
    PostCsspxToViewport } from './plugins/postcss-px-to-viewport'

export default defineConfig({
   
  plugins: [
    vue(),
    vueJsx(),
  ],
  //第二步： 注册
  css:{
   
    postcss:{
   
      plugins:[PostCsspxToViewport()]