首页 文章

Angular 5将SASS mixins导入组件

提问于
浏览 次
0

在我的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');

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

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

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

1 回答

  • 0

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

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

相关问题