引入全局样式文件 ---项目记录（六）

1.将reset.scss和global.scss两个文件放到assets/styles文件夹下

2.在main.js中引入global.scss

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/styles/icon.css'
import './assets/styles/global.scss'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.global.scss引入各种css文件,这样main.js中只引用global.scss文件就好了

@import "./reset";
@import "./mixin";
@import "./flapCard";
@import "./home";

4.创建mixin.scss文件,定义px转换成rem的函数方法

$ratio: 375 / 10;

@function px2rem($px) {
  @return $px / $ratio + rem;
}

5.使用如在App.vue中使用

<template>
  <div id="app">
    <span class="fonts">ABCDE</span>
    <router-view/>
  </div>
</template>

<script>
  export default {}
  document.addEventListener('DOMContentLoaded', () => {
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > 50 ? 50 : fontSize
    const html = document.querySelector('html')
    html.style.fontSize = fontSize + 'px'
  })
</script>

<style lang="scss" scoped>
  @import "./assets/styles/global";
  .fonts{
    font-family: 'Days One';
    font-size: px2rem(50);
    color: red;
  }
</style>