记一次uniapp微信小程序开发scss变量失效的问题

吴传逞2025-09-07 22:52

如图所示，这是解决问题后的效果图，没解决之前红框框里面的这个搜索组件背景是白色的，这个组件使用的是京东nutui-uniapp的nut-searchbar，类名为nut-searchbar，在类下面定义了nut-searchbar背景颜色变量为橙色，浏览器上显示没问题，但微信小程序上显示依然为白色，原因是因为微信小程序样式穿透有所不同，加上穿透就好了（::v-deep)

复制代码

::v-deep.nut-searchbar {
  --nut-searchbar-background: $primary-color;   /* 输入框背景白 */
  --search-bar-btn-bg: #f03d37;  /* 搜索按钮背景红 */
  --search-bar-btn-text-color: #fff; /* 按钮文字白 */
  --search-bar-input-height: 60rpx;   /* 输入框高度 */
  --search-bar-font-size: 24rpx;      /* 输入文字大小 */
  --nut-searchbar-input-border-radius: 50rpx;
  .nut-searchbar__search-input{
	  border-radius: 50rpx;
  }
  .search-btn{
	  border-radius: 50rpx;
	}
}

这个类里面的变量是nutui-uniapp组件定义的，我们在这里面改了组件就会使用我们改了的变量，从而修改原先样式，如果还不明白的话可以使用京东组件时打开浏览器的检查，把鼠标定义到元素上检查样式就可以看到了，如图所示