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

用户7430965738452025-12-07 9:43

Postcss-custom-properties 默认只能识别:root{} 和:html{}的变量

确保你的css变量符合规定不然不会生效

js 复制代码

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

        }
        //这个path和process都是node的 所以还要引入 const path = require("path")
        //这里vite里的postcss对象和postcss.config.js里默认导出的那个对象是一样的

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

css3的变量不能用于less因为postcss在生命周期上要比less靠后（less先处理postcss后处理但是其他的css文件都是能正常用的

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

1.全用less然后在preprocessorOptions: {less: {globalVars: 里去写全局变量或者你单独写个less文件然后在其他文件里用@import url(./xxx.less)引入 globalvars可以和dotEnv联用

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

虽然用less定义css3的变量在普通的模块化css里也能引入也能正常生效但是由于按需引入等问题

模块化less在vite里老是不生效不知道是不是我环境的问题还是他不支持.module.less的写法

注意：CSS Modules 设计初衷就是配合 JavaScript 使用，无法像传统 CSS 那样直接在 HTML 中通过 class 属性使用原始类名。这是 CSS Modules 实现样式作用域隔离的机制决定的。所以.module.css需要在main.js(入口文件）中引入他才会打包

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

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