角5向组件中导入SASS混合物

Question

在我的角5项目中，我为我的SASS提供了一个单独的目录，它包含我所有的变量、函数和混合目录。所有东西都在我的主style.scss中导入

@import
'abstracts/variables',
'abstracts/functions',
'abstracts/mixins';

现在，从我的角分量SCSS文件中，我可以导入变量并使用它，如下所示

@import '~sass/abstracts/variables';

这很好，但是当我想要引用一个混合函数时，它反过来调用一个函数--但是它不起作用。

// _variables.scss file
$text-settings: (
  'xs': (
    font-size: .75rem, // 12px
    line-height: $base-line-height
  )
);

// _functions.scss file
@function font-size($screen-size: 'base') {
  @return map-get(map-get($text-settings, $screen-size), 'font-size');
}

// _mixins.scss file
@mixin font-xs {
  font-size: font-size('xs');
}

在我的角组件中，我现在像这样应用它

.class {
   @include font-xs;
}

当我在浏览器中检查元素时，它会显示

font-size: font-size('xs');

Update：看起来只有当所有内容都被分割到不同的文件中时才会发生这种情况，但是如果所有必需的项都在同一个sass文件中，然后在角分量scss文件中引用，则会正常工作。

在这个样板项目SASS项目中添加了一个相同的sass结构，它似乎可以在多个文件中很好地工作，所以它肯定与角CLI有关。我的版本是

"@angular/cli": "^1.7.4",
"@angular/compiler-cli": "^5.2.9",

Answer 1

看起来，在角组件scss文件中，我还必须导入所需的所有其他文件，所以我也可以通过导入_functions.scss和_variables.scss来修复这个问题。我想这是有意义的，但我的印象是角cli将处理这些依赖项，因为我在我的主styles.scss中导入了所有这些依赖项。

// styles.scss file
@import
'abstracts/variables',
'abstracts/functions',
'abstracts/mixins';