我正在尝试为我的项目创建两个主题 . 我有以下设置:

款式

  • 全局

  • mixins

  • 帮手

  • 主题

现在每个主题都有一个index.scss:

@import "../../mixins/index";
@import "./colors";
@import "./breakpoints";
@import "./typography";
@import "core";

每个主题都有一个_core.scss:

@if import-once('core.scss') {
  :global {
    html, body {
      background-color: $grey-page-background;
      height: 100%;
    }

    body {
      color: $grey-text-primary;
      font-family: $font-family-standard;
    }

    body.page-body.modal-overflow-hidden {
      overflow: hidden;
    }

    .container {
      padding: 0;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      @include breakpoint(large down) {
        padding: 0 10px;
      }
    }

    .no-margin {
      margin: 0 !important;
    }

    .text-center {
      text-align: center;
    }

    .green {
      color: $green-smava-primary;
    }

    a:focus, a:hover, a:active {
      color: inherit;
    }

    /* vb = vertical align block, for supporting browser dont support flex-box well */
    .vb {
      text-align: left;
    }

    .vb:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    /* vc = vertical align center child, for supporting browser dont support flex-box well */
    .vc {
      display: inline-block;
      vertical-align: middle;
    }

    .ui.list {
      list-style-type: none;
      margin: 1em 0;
      padding: 0;
      .item {
        table-layout: fixed;
        list-style-type: none;
        list-style-position: outside;
        padding: .21428571em 0;
        line-height: 1.14285714em;
      }
    }

    .ui.list.large {
      font-size: 1.14285714em;
    }
  }

}

正如您所看到的 - > index imports core - >现在主题被导入到相应的组件(我们有一个组件的版本控制系统 - 所以这种方法在这里很好) .

因此,组件scss可以如下所示:

@import '~styles/theme/smava/index';

.dialog {
  &-input {
    margin: 0 0 10px 0;
  }
  &-action {
    border-top: 1px solid $grey-shadow-block;
    float: right;
  }
  &-button {
    &-pass {
      margin-right: 30px;
    }
    &-login {
      margin: 0;
    }
  }
}

由于我有多个组件,因此core.scss会多次导入 .

问题是,我需要为身体设置颜色 - 这就是我拥有这个core.scss的原因 .

那么我该如何重复删除呢?不幸的是,导入主题的方法必须保持不变 .

我的堆栈:React / Webpack / Redux / Node-sass