覆盖全局样式

全局样式需要加上 :global ，这样产出不会受配置规则影响。

:global(.iconfont) {
    font-family: "yis-demo" !important;
    font-size: 32px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

样式复用

这里介绍两种方式来复用代码

• apply

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  };
}

.danger {
  @apply --danger-theme;
}

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  };
}

.danger {
  @apply --danger-theme;
}

• composes

.className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className;
  color: yellow;
}

.className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className;
  color: yellow;
}