全局Scss变量引入配置

背景

scss变量定义全局并拆分为独立文件后，在Vue文件组件中使用时需要进行严格import操作，否则无法找到变量，为了后续使用方便，期望能够一次引用，全局使用。

相关环境说明

• vue cli： 3.x
• vue： 2.6.12
• node-sass： 4.12.0
• sass-loader： 8.0.0
• vue-template-compiler： 2.6.12

配置说明

1、在assets文件目录下定义全局变量文件：

...
$global_height: 64px;
$global_width: 220px;
...

2、在文件vue.config.js中配置scss文件预处理

module.exports = {
	...
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/styles/_global.scss";`
            }
        }
    }
    ...
}    

3、在Vue文件组件中使用全局变量

<template>
	<div class="main-content">content</div>	
</template>
<script>
export default {
    name: "Main",
    ...
}
</script>

<style scoped lang="scss">
.main-content {
    height: $global_height;
    width: calc(100vw - #{$global_width})
}
</style>

此处需要注意的是在scss中使用calc计算变量的方式为#{$变量名}