Question

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

样式

globals
混入
辅助
主题

现在每个主题都有一个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;
    }
  }

}

如您所见 - ＆gt; index进口核心 - ＆gt;现在主题被导入到相应的组件（我们有一个组件的版本控制系统 - 所以这种方法很好）。

因此，组件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的原因。

那我怎么能重复删除呢？不幸的是，导入主题的方法必须保持不变。

我的筹码：反应/的WebPack /终极版/节点SASS

Sass重复数据删除@imports

0 个答案: