预定义css，vue中使用的做法

首先新建一个style.css文件
里面可以放重置样式，也可以放一些预定义css样式
如把它写成这样子

.text-red{
    color:#B22222
}
.text-orange{
    color:#8B5A2B
}
.bg-grey{
    background: #E0E0E0;
}

在vue里面，全局引入这个css文件，
import "@/views/css/style.scss"
那么加载所有页面的时候，都附带有这些样式
在vue里面可以直接使用css的class来修改样式，比如：
<h2 class="text-red bg-grey">登录来了，测试一下</h2>

再比如定义个flex常用布局组合类
.f-jc-ac{
    display: flex;
    justify-content:center;
    align-items: center;
}

<div class="f-jc-ac box">
            <div class="inner">
                haha
            </div>
            <div class="inner">
                haha
            </div>
</div>

可以参考阅读以下bootstrap里面css的定义规则和取名规则
比如<div class="p-3 border bg-light">设置padding，带边框，背景light</div>
源代码中关于这个的写法如下
.p-3 {
padding: 1rem !important;
}
.border {
border: 1px solid #dee2e6 !important;
}
.bg-light {
background-color: #f8f9fa !important;
}

vue里面引入全局scss变量的方法
1.assets下创建一个全局变量文件common.scss，内容$myColor: green;
2.编辑根目录vue.config.js文件，加入如下代码
module.exports = {
    css: {
        loaderOptions: {
          sass: {
            prependData: `@import "~@/assets/common.scss";`
          }
        }
    },
//其它代码
}
3.组件里直接使用变量
<style lang="scss" scoped>
    .box {
        i{
            color:$myColor;
        }
    }
</style>
注意比较和上面全局样式的区别，上面全局样式是class类，可以直接使用类
下面是全局变量，可以在样式部分直接使用