Vue3中全局使用Sass变量方法

2025-03-13 约 188 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=146229199

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方法了。