vite里postcss里@csstools/postcss-global-data的用法 （importFrom失效后的解决办法

Postcss-custom-properties 默认只能识别:root{} 和:html{}的变量
确保你的css变量符合规定 不然不会生效

```postcss: {
            plugins: [
                postcssGlobalData({
                    files: [
                        path.resolve(process.cwd(), "从你vite.config.js到css的相对路径")
                    ]
                }),
                postcssPresetEnv()
            ]

        }
        //这个path和process都是node的 所以还要引入 const path = require("path")
        //假如你用的是根据开发和生产模式选用不同配置文件的话 这里__dirname是你使用变量的文件的路径
        // process.cwd()则是node命令执行的路径 如果不管模式全写vite.config.js里则两个效果一样
        //
        //这里vite里的postcss对象和postcss.config.js里默认导出的那个对象是一样的
        //引包 `npm i @csstools/postcss-global-data`

gloabalData需要放到custom_properties前面 代码里的postcssPresetEnv是一堆插件的集合(pluginPackage)其中就包含了custom_properties

css3的变量不能用于less因为postcss在生命周期上要比less靠后（less先处理，postcss后处理
用了global-data插件后less里声明less变量 css变量 在css文件里都可以用
(less变量还是要@import一下

目前vite模块化css要实现变量和代码解耦有三种方法

1.全用less然后在
preprocessorOptions: {less: {globalVars:{}
里去写全局变量(globalvars可以和dotEnv的环境变量联用)

2.你单独写个less文件声明less变量@aa:red
然后在其他文件里用@import url(./xxx.less)引入后正常使用 如color:@aa

2.用css自带的变量写法 :root{ --aaa-bb:变量} 使用var(--aaa-bb)来引用配合global-data和custom-properties来实现\ (这个需要配置custom-properties 和 global-data

**postcss-modules**是vite里css>modules>里的配置项实际传递的目标， 图中为custom-properties的说明 （虽然他说只能转换css但是我用presetEnv时less和css都能转换 不需要加.module

注意事项

如果css>modules>scopeBehaviour: "值"设置的是local就是开启模块化 global是全局化（不处理css文件写的啥就是啥） 这个和你直接写.module.css和.module.less是一样的效果
区别在于如果用了.module.css或.module.less相当于彻底舍弃了css的功能，只能通过在js引入
手动创建元素 并设置className = 引入css变量.选择器
或者在react里结合jsx使用 如下：

import styles from './styles/second.module.less' 
function MyComponent() { 
        return ( 
            <div className={styles.letest}> 这个 div 会应用模块化样式 
            </div> 
        ) 
}

只在main.js或html里引入是不会生效的

实测.module.less里 :local(选择器)会失效 .global(选择器) 会生效
最主要vite的scopebehavior已经声明了要模块化 .module后缀和less里:local()的写法其实都是多余的