关于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>