在vue3+vite项目中使用vw和vh适配

简介：
在Vue 3 + Vite项目中，使用Sass预处理器可以极大地提升样式编写的效率和可维护性。本篇博客将介绍如何在Vue 3 + Vite项目中使用Sass语法编写样式，以及如何将Sass样式抽取到全局中

什么是Sass
1.Sass（Syntactically Awesome Style Sheets）是一种成熟的CSS预处理器，它扩展了CSS的功能，提供了更多的样式编写工具和语法。Sass可以让开发者使用嵌套规则、变量、混合器等功能来编写更简洁、可维护的样式代码。

2.在Vue 3 + Vite项目中配置Sass
在Vue 3 + Vite项目中，使用Sass非常简单。首先，确保已经安装了相关的依赖。可以通过以下命令进行安装：

npm install -D sass
npm install -D sass-loader

在utils中创建文件utils.scss

// utils.scss
// 使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div

@use "sass:math";

//默认设计稿的宽度
$designWidth: 1600;
//默认设计稿的高度
$designHeight: 650;
//最小字体
$minFontSize: 12;

//px转为vw的函数

@function vw($px) {
  @return math.div($