如何导入 scss 变量取决于包含的 mixin

Question

我的 Angular 项目中有以下结构：

- modules
 -- foo-module
   -- foo-comp
- assets
 -- fonts
   -- Open_Sans
      ....
- scss
 -- partials
   -- _fontface.scss
   -- _variables.scss
 styles.scss

styles.scss：

@import "./partials/variables";

* {
  margin:  0;
  padding: 0;
}

body{
    background-color: $color;
    font-family: $font-face;
}

_variables.scss：

@import "./fontface";

@include font-face(OpenSans, "../fonts/Open_Sans/OpenSans-Regular", 500, normal, ttf);

$font-face: OpenSans, sans-serif;
$color: yellow;

_fontface.scss：

    // =============================================================================
// String Replace
// =============================================================================

@function str-replace($string, $search, $replace: "") {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

// =============================================================================
// Font Face
// =============================================================================

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
    $src: null;

    $extmods: (
        eot: "?",
        svg: "#" + str-replace($name, " ", "_")
    );

    $formats: (
        otf: "opentype",
        ttf: "truetype"
    );

    @each $ext in $exts {
        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
        $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
    }

    @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $src;
    }
}

comp.scss：

@import '...../变量';

现在我想在我的 comp.scss 中使用 _variables.scss 作为导入。所以看起来不太可能，因为@include font-face(OpenSans, "../fonts/Open_Sans/OpenSans-Regular", 500, normal, ttf); 这个mixin 的url 不依赖于 comp.scss url，所以我有相应的错误。而且 style.scss 看起来不错（../ url 的原因）

我需要这个全局变量 $font-face 以供将来使用多种字体，并且我想将它们存储在一个地方。

Answer 1

从 Angular 6 开始，您似乎可以将绝对导入与 ~ 一起使用

@include font-face(OpenSans, "~src/assets/fonts/Open_Sans/OpenSans-Regular", 500, normal, ttf);