uniapp-使用全局颜色变量

在uniapp开发过程中，对于一些公共变量，例如颜色变量，可以通过scss文件定义全局颜色变量，然后在需要的页面中引用即可，这样方便统一管理。

在uniapp框架中，默认为我们创建了一个全局样式配置文件uni.scss，在该文件中可以定义全局的样式变量。

自定义颜色变量配置文件

我们可以在uni.scss文件中自定义全局颜色变量，也可以单独创建一个颜色变量配置文件。

例如创建一个base-style.scss颜色变量配置文件，然后在uni.scss中导入这个文件，如下所示。

base-style.scss

$system-theme-color:red;

uni.scss

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

注意：如果创建该文件之前已处于运行状态，创建该文件并且导入之后最好重新运行下，否则对应的终端，例如h5、微信小程序不一定会生效。

页面样式中使用

直接使用颜色变量即可。

使用前

.text {
	color: red;
}

使用后

.text {
	color: $system-theme-color;
}

图标颜色替换

uniapp使用uni-icons图标组件的时候，如果需要指定图标的颜色，常规写法可能是直接在标签上定义颜色，如下所示。

<uni-icons type="contact" size="30" color="red"></uni-icons>

如果不想要在标签中使用颜色，想要在当前组件的样式中直接使用全局颜色变量，可以这样写

.uni-icons {
  color: $system-theme-color !important;
}

注意：这里必须在后面加上!important 添加类名的权重，否则不会生效。因为uni-icons有行内样式，例如下图1中的style里的color:rgb(51,51,51); 它会覆盖掉类名的样式，如图2所示。

图1：

图2：

但是这种写法还不太完美，因为它只对h5页面有用，如果是其它终端，例如微信小程序，这样写还是不会生效，需要使用到 :deep()选择器，该选择器可以穿透组件的样式作用域（scoped），从而支持修改子组件的样式，代码如下所示。(:deep()是vue3写法，如果是vue2则是/deep/ 或者 ::v-deep)

:deep() {
  .uni-icons {
    color: $system-theme-color !important;
  }
}