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

相关推荐
wmm_会飞的@鱼1 分钟前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
yvvvy4 分钟前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn4 分钟前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity2616 分钟前
微服务架构
前端·微服务
Hilaku21 分钟前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明24 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
睡不着先生30 分钟前
CSS `@scope` 实战指南:开启局部样式隔离新时代
css
Danny_FD37 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip42 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济1 小时前
后端程序员的CSS复习
前端