Vue3中全局使用Sass变量方法

1.首先需要在自己的静态资源目录下，放入两个sass文件。需要注意的是 .d 文件，是用来在开发的时候给予提示用的。 

 这是里面的内容：

// function.scss@use "sass:math";@function vw($px) {@return math.div($px, 1920) * 100vw;
}@function vh($px) {@return math.div($px, 1080) * 100vh;
}

// function.d.sass@function vw($px) {}@function vh($px) {}

2.在构建工具中配置：

这里以vite为例：

export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@use "@/assets/functions" as *;`}}}
})

到这里，你的任何.vue文件中的style中都能直接使用 vw、vh方法了。