一、配置变量css文件
src/styles/variables.scss文章来源：https://www.toymoban.com/news/detail-734446.html
// 设置色值变量
// 1、继承body中设置的样式内嵌style="--baseColor:#0075FF;"
// 一般常用于Saas系统，如qiankun框架主应用决定子应用的样式
$primary: var(--baseColor, #0075FF); // 主色调，可设置默认值
// 2、普通的设置一个常量色值
$blue: #324157;
// 导出色值变量
:export {
primary: $primary;
blue: $blue;
}二、在组件中使用变量文章来源地址https://www.toymoban.com/news/detail-734446.html
//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>到了这里，关于关于css中设置变量用于全局Css或者Js中使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
