vuecli3 引入全局scss变量_Vue-cli中使用Scss全局变量

开发环境：vue-cli

相关插件：sass-resources-loader

应用场景：在vue-cli各个组件中应用全局scss变量

先简要介绍下今天遇到的开发内容，如下图：

是一个登录页面，其中头部标题需要抽离成单独的组件以供复用，它的高度为定值，头部以下的高度为100vh(百分百浏览器可视区域高度)- 头部高度，于是有了如下代码：

.head-label {

border-bottom: 1px solid #ddd;

height: 3.125rem;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.5rem;

i {

font-size: 1.6rem;

position: absolute;

left: .5rem;

margin-top: .1875rem;

}

h2 {

font-size: 1.5rem;

}

}

我为头部设置了固定高度加1像素的下边框，然后计算出下面div的高度：

.user-login {

.main {

height: calc(100vh - 3.125rem - 1px);

}

}

然后问题来了，如果有一天需求变