将scss或者less变量注入到全局中

理由：定义的全局scss或者混合或函数不想一直导入

来到vite的配置中也就是vite.config.js或者.ts

   css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler',
                    // 如果还有其他的、分号后面在使用@use
                    // 注意：必须使用@use
                    additionalData: '@use  "@/styles/global.scss" as *;',  
                }
            }
        }

新增Tailwind

看这里

写自己的postcss插件

 question: 为啥要自己写插件
 answer: 比如说我现在想自己处理某些px转换、我想细微控制等等

const defaultOptions = {
    viewPortWidth: 375,
    mediaQuery: false,
    unitToConvert: 'px'
}
const pxToViewport = (options = defaultOptions): Plugin => {
    const opt = Object.assign({}, defaultOptions, options)
    return {
        postcssPlugin: 'postcss-px-to-viewport',
        //css节点都会经过这个钩子
        Declaration(node) {
            const value = node.value
            //匹配到px 转换成vw
            if (value.includes(opt.unitToConvert)) {
                const num = parseFloat(value)
                const transformValue = (num / opt.viewPortWidth) * 100
                node.value = `${transformValue.toFixed(2)}vw` //转换之后的值
            }
        },
    }
}

// 在来到vite.config.js
     css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler',
                    additionalData: '@use  "@/styles/global.scss" as *;',
  
                }
            },
            postcss: {
                plugins: [
                    pxToViewport({
                        viewPortWidth: 1920
                    })
                ]
            }
        }

上述的操作会为postcss 新增一个插件、不过这样会导致Tailwind和autoprefixer等插件失效

import Tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
 postcss: {
                plugins: [
                    Tailwind,    // 这里不能 require("tailwindcss")
                    autoprefixer, // 这里不能 require("autoprefixer")
                    pxToViewport({
                        viewPortWidth: 1920,
                    })
                ]
 }

上述不能的原因是因为require是common.js的语法、现在是esmModlue
经过这些 你既 使用自定义的变量 Tailwind提供的便利class 还有自己控制pxToViewport的插件（你可以自己处理css）