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

相关推荐
AskHarries9 分钟前
Toolhub — 一个干净实用的在线工具集合
前端·后端
H尗24 分钟前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js
昔人'32 分钟前
html`contenteditable`
前端·html
爱宇阳37 分钟前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
@大迁世界41 分钟前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js
crary,记忆43 分钟前
简介NPM 和 NPX
前端·学习·npm·node.js
JianZhen✓1 小时前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
郝学胜-神的一滴1 小时前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大2 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海2 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf