uniapp定义scss颜色变量deep()修改子组件样式

uni.scss中

@import "@/common/style/base-style.scss";

在base-style.scss中

$brand-theme-color:#28B389;//品牌主体红色$border-color:#e0e0e0 ;
$border-color-light:#efefef;
$text-font-color-1: #000 ;//文字主色
$text-font-color-2:#676767;//副标题颜色
$text-font-color-3: #a7a7a7;//浅色
$text-font-color-3 :#e4e4e4 ;//更浅

在index.vue中使用

<template><uni-icons type="sound-filled" size="28"></uni-icons></template>
<style lang="scss" scoped>
.left{width: 150rpx;display: flex;align-items: center;justify-content: center;// 穿透到组件内部,加：deep可以在微信小程序会显示:deep(){//只加.uni-icons在H5可以显示，微信小程序不会显示.uni-icons{color:$brand-theme-color !important;}}.text{color:$brand-theme-color;font-size: 30rpx;}}
</style>