Vue で rem 適応を使用する方法

//postcss-pxtoremをインストール
npm i postcss-pxtorem -S

// 基本サイズ const baseSize = 37.5
// rem関数を設定する function setRem() {
 const salepro = document.documentElement.clientWidth / 750
 // 現在のページ幅は 750 幅を基準としています。必要に応じて変更できます。
 // ページのルートノードのフォントサイズを設定します。 document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// setRem() を初期化する
// ウィンドウサイズを変更するときに rem をリセットする
window.onresize = 関数 () {
 リセット()
}

モジュール.エクスポート = {
 「プラグイン」: {
 "postcss-pxtorem": {
  "ルート値": 37.5,
  "propList": ["*"]
 }
 }
}

'@/rem/rem.js' をインポートします

<style lang="scss" スコープ>
。について {
 幅: 750ピクセル;
 高さ：100vh;
 ボックスのサイズ: 境界線ボックス;
 背景色: 青 !重要;
 .kk {
  幅: 350ピクセル;
  高さ: 350ピクセル;
  背景色: 赤;
 }
}
</スタイル>