Vue3中全局使用Sass变量方法

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

这是里面的内容:

css 复制代码
// function.scss

@use "sass:math";

@function vw($px) {
    @return math.div($px, 1920) * 100vw;
}

@function vh($px) {
    @return math.div($px, 1080) * 100vh;
}
css 复制代码
// function.d.sass

@function vw($px) {}

@function vh($px) {}

2.在构建工具中配置:

这里以vite为例:

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

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

相关推荐
excel28 分钟前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始1 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible1 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫1 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评2 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner2 小时前
【html】canvas实现一个时钟
前端·html
qianmo20212 小时前
基于any2web+deepseek实现对三角函数定义的理解
css·html·css3
林烈涛2 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
Komorebi_99993 小时前
Unocss
开发语言·前端
goto_w3 小时前
前端实现复杂的Excel导出
前端·excel