Vue + sass 实现项目自适应

前提： 要实现这个功能首先要实现整个项目支持sass的语法  

1.首先在App.vue里面的script代码里面添加一个自调函数，写在created里面这样可以实现监听页面的实时变化来改变页面的font-size大小

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  import './assets/iconfont/iconfont.css'
  export default {
    name: "app",
    data() {
      return {};
    },
    created(){
      (function(doc, win) {
        let docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                  let clientWidth = docEl.clientWidth;
                  if (!clientWidth) return;
                  docEl.style.fontSize = 16 * (clientWidth / 1920) + 'px';
                };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
    },
    methods: {

    }
  };
</script>
<style lang="scss">



</style>

2.在common.scss里面创建一个pxTorem的函数，

@function pxTorem($px){//$px为需要转换的字号
  @return $px /16px * 1rem;
}

3.然后在每个要用到这个函数的页面引入这个文件

   

  我这边是每个vue的实例要用到pxTorem（）这个函数都要引入 ，这个我本来想实现在哪里一次引入就可以所有实例都用，但是没有实现不知道能不能实现这个功能如果有大神知道可以指点一下！！！

引入之后的用法是