Vue scss使用全局变量及移动端100vh高度适配

开发移动端 当设置100vh时，在各个浏览器计算高度不同，Chrome和Safari浏览器会计算底部tabbar和顶部url地址栏，所以产生比预期高的值，

至此 可借助vh-check来帮助适配各个浏览器的兼容

使用方法

npm install vh-check

vue main.js 引入

import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
vhCheck();

组件内使用

<style lang="scss" scoped="">
.container {
  height: 100vh;
  height: calc(100vh - var(--vh-offset, 0px));
</style>

如果单独提出在scss文件中定义，并且在组件中使用

例如 100vh.scss 

$vh: calc(100vh - var(--vh-offset, 0px));

    然后再组件内使用，请先@import 引入在使用，如果不用@import引入在main.js引入也无效

@import '~@/styles/100vh.scss';
body{
  height: $vh !important;
}

 如果想不使用@import 引入 ，

1. 在vue.config.js进行配置 
2. 使用sass-resoure-loader进行配置 两种方法 具体百度

在vue.config.js进行配置的方法如下

css: {
    //查看CSS属于哪个css文件
    sourceMap: true,
    loaderOptions: {
      scss: {
        // @/ 是 src/ 的别名
       
        // 注意：如果prependData报错 可使用data属性 
        prependData: `@import "~@/styles/100vh.scss";`,
      },
    },
  },

这样可在组件内直接使用，而不用进行@import进行导入，变成全局变量

注意：如果使用calc计算属性 需要使用#进行隔离 

body{
 height: calc(#{$vh} - 110px) !important;
}

End