关于css中设置变量用于全局Css或者Js中使用

一、配置变量css文件
src/styles/variables.scss

// 设置色值变量

// 1、继承body中设置的样式内嵌style="--baseColor:#0075FF;"
// 一般常用于Saas系统，如qiankun框架主应用决定子应用的样式
$primary: var(--baseColor, #0075FF);  // 主色调，可设置默认值

// 2、普通的设置一个常量色值
$blue: #324157;


// 导出色值变量

:export {
    primary: $primary;
    blue: $blue;
}

二、在组件中使用变量

//Scss

<style lang="scss" scoped>
   @import '~@/styles/variables.scss';

   .div {
        color: $primary;
    }
</style>

// Js中使用

<template>
    <div :style="color: variables.blue"></div>
</template>

<script>
    import variables from '@/styles/variables.scss'

    export default {
        data() {
            return {
                variables
            }
        }
    }
</script>