Vue-cli中使用Scss全局变量

小贝

开发环境：vue-cli 相关插件：sass-resources-loader 应用场景：在vue-cli各个组件中应用全局scss变量

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

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

1. <style lang="scss" scoped>
2. .head-label {
3. border-bottom: 1px solid #ddd;
4. height: 3.125rem;
5. display: flex;
6. justify-content: center;
7. align-items: center;
8. font-size: 1.5rem;
9. i {
10. font-size: 1.6rem;
11. position: absolute;
12. left: .5rem;
13. margin-top: .1875rem;
14. }
15. h2 {
16. font-size: 1.5rem;
17. }
18. }
19. </style>

复制代码

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

1. <style lang="scss" scoped>
2. .user-login {
3. .main {
4. height: calc(100vh - 3.125rem - 1px);
5. }
6. }
7. </style>

复制代码

然后问题来了，如果有一天需求变化导致我需要更改头部高度或者下边框的宽度，我就需要修改两处style的数值，如果有多处style应用同一数值，做修改时必然麻烦，于是引出了今天的主题：

如何在vue-cli中应用scss全局变量？

不要着急 Let's go on

首先需要安装一个开发插件：sass-resources-loader

1. npm i sass-resources-loader --save-dev

复制代码

然后修改vue-cli的build/utils.js，找到scss的加载设置：

1. return {
2. css: generateLoaders(),
3. postcss: generateLoaders(),
4. less: generateLoaders('less'),
5. sass: generateLoaders('sass', { indentedSyntax: true }),
6. scss: generateLoaders('sass'),
7. stylus: generateLoaders('stylus'),
8. styl: generateLoaders('stylus')
9. }

复制代码

修改为：

1. return {
2. css: generateLoaders(),
3. postcss: generateLoaders(),
4. less: generateLoaders('less'),
5. sass: generateLoaders('sass', { indentedSyntax: true }),
6. scss: generateLoaders('sass').concat({
7. loader:'sass-resources-loader',
8. options:{
9. resources:path.resolve(__dirname,'./../src/assets/scss/base.scss')
10. }
11. }),
12. stylus: generateLoaders('stylus'),
13. styl: generateLoaders('stylus')
14. }

复制代码

其中path.resolve需要传入待引入的scss文件，__dirname代表当前目录，然后一步步找到自己的base.scss（保存后需要重启开发命令：npm run dev）

开始食用
首先在base.scss中定义自己需要的变量

1. $head-width:3.125rem;
2. $border-width:1px;

复制代码

然后在head的style中应用：

1. <style lang="scss" scoped>
2. .head-label {
3. position: fixed;
4. top: 0;
5. border-bottom: $border-width solid #ddd;
6. height: $head-width;
7. display: flex;
8. justify-content: center;
9. align-items: center;
10. font-size: 1.5rem;
11. i {
12. font-size: 1.6rem;
13. position: absolute;
14. left: .5rem;
15. margin-top: .1875rem;
16. }
17. h2 {
18. font-size: 1.5rem;
19. }
20. }
21. </style>

复制代码

div.main的style：

1. <style lang="scss" scoped>
2. .user-login {
3. .main {
4. margin-top: calc(#{$head-width} + #{$border-width});
5. height: calc(100vh - #{$head-width} - #{$border-width});
6. }
7. }
8. </style>

复制代码

这里需要提一下另外一个细节，在使用css3的calc函数时，如要要插入scss的变量，需要用scss的插入法：#{变量}，才能够正常使用，否则会出错哦！

应用效果如下：

不知道小伙伴们get到没有，如果有什么疑问可以留言哦