样式

src/App.vue

@@ -29,17 +29,6 @@ export default {
 </script>
 
 <style lang="scss">
-* {
-    box-sizing: border-box;
-    line-height: 1;
-    margin: 0;
-    padding: 0;
-}
-html,
-body {
-    padding: 0;
-    margin: 0;
-}
 #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -50,6 +39,7 @@ body {
     flex-direction: column;
     height: 100vh;
 }
+
 .body-container {
     flex: 1;
     display: flex;

src/assets/style/index.scss

+
+// 所有样式文件的入口
+
+@import "./reset";
+@import "./variable";
+

src/assets/style/reset.scss

+
+
+* {
+    box-sizing: border-box;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+}
+
+
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+a,
+p,
+ul,
+li {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    font-size: 14px;
+    background-color: #fff;
+    color: #000;
+    letter-spacing: 0.5px;
+    font-family: "Microsoft YaHei", "微软雅黑", "Source Sans Pro", Arial, sans-serif;
+    // 顺滑滚动
+    scroll-behavior: smooth;
+}
+
+
+ul,
+li {
+    list-style: none;
+}
+
+
+a,
+a:hover,
+a:focus,
+a:visited {
+    color: #000;
+}
+
+a {
+    text-decoration: none;
+    outline: none;
+}
+
+/* 去掉获取焦点时的蓝色发光边框 */
+input,
+textarea,
+video,
+button {
+    outline: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+/*解决谷歌浏览器中的input背景色默认是黄色*/
+input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+}
+
+

src/assets/style/variable.scss

+
+// 样式变量文件
+
+$color-1: pink;
+$bg-color:rgb(229,185,40);

src/main.js

@@ -4,6 +4,7 @@ import router from './router'
 import store from './store'
 import './registerServiceWorker'
 import axios from 'axios'
+import './assets/style/index.scss'
 
 import baseURL from '../config/baseUrl.js'
 console.log('baseURL:', baseURL)

vue.config.js

@@ -19,5 +19,14 @@ module.exports = {
                 pathRewrite: { '^/webapi': '/' }
             }
         }
+    },
+    // css 相关选项
+    css: {
+        /*为预处理器 loader 传递自定义选项*/
+        loaderOptions: {
+            sass: {
+                prependData: `@import "@/assets/style/index.scss";`
+            }
+        }
     }
 }