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（）這個函數都要引入 ，這個我本來想實現在哪裏一次引入就可以所有實例都用，但是沒有實現不知道能不能實現這個功能如果有大神知道可以指點一下！！！

引入之後的用法是