Question

在我的Angular 5项目中，我有一个单独的目录用于我的SASS，它包含我的所有变量，函数和mixins。一切都是在我的主要style.scss

中导入的

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

现在从我的角度组件SCSS文件中我可以导入变量并像这样使用它

@import '~sass/abstracts/variables';

这很有效，但是当我想引用一个反过来调用函数的mixin时 - 但它不起作用。

// _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');

更新：看起来只有当所有内容在不同文件中分开时才会发生，但如果所有必需项都在同一个sass文件中，然后在angular components scss文件中引用，则会发生这种情况。

为此样板项目SASS project添加了一个相同的sass结构，它似乎可以在多个文件中正常工作，因此它必定与Angular-CLI有关。我的版本是

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

Answer 1

看起来在angular components scss文件中我还必须导入所需的所有其他文件，所以我还能通过导入_functions.scss和_variables.scss来解决这个问题。我认为这是有道理的，但我的印象是angular-cli会处理这些依赖关系，因为我已经在我的主要styles.scss中导入了所有这些。

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

Angular 5将SASS mixins导入组件

1 个答案: