一、CSS 变量

  通过观察，在小程序中使用 vant 组件库时，css 的引入是采用 CSS 变量的方式的。

官方文档：

Vant Weapp (opens new window)
CSS 变量 (opens new window)

1、代码示例

<style>
  /* 定义 */
  :root {
    --box-default-background: #23272e;
  }

  /* 使用 */
  .box {
    background-color: var(--box-default-background);
  }
</style>

2、局部有效

使用：

<van-button class="my-button"> 默认按钮 </van-button>

改变：

.my-button {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
}

3、全局有效

• app.wxss

page {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
  --toast-max-width: 100px;
  --toast-background-color: pink;
}