Angular 5 importuje miksy SASS do komponentów

W moim projekcie Angular 5 mam oddzielny katalog dla mojego SASS, zawiera on wszystkie moje zmienne, funkcje i miksy. Wszystko jest importowane do mojego głównego pliku style.scss

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

Teraz z mojego pliku SCSS komponentu kątowego mogę zaimportować zmienne i używać ich w ten sposób

@import '~sass/abstracts/variables';

Działa to świetnie, ale gdy chcę odwołać się do miksu, który z kolei wywołuje funkcję - ale to nie działa.

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

W moim komponencie kątowym stosuję go teraz w ten sposób

.class {
   @include font-xs;
}

Kiedy sprawdzam element w przeglądarce, pokazuje się

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

Aktualizacja: wygląda na to, że dzieje się tak tylko wtedy, gdy wszystko jest podzielone na różne pliki, ale zadziała, jeśli wszystkie wymagane elementy znajdują się w tym samym pliku sass, a następnie znajdują się w nich odniesienia w pliku scss komponentów kątowych.

Dodano identyczną strukturę sass do tego szablonowego projektu projekt SASS i wydaje się, że działa dobrze we wszystkich wiele plików, więc zdecydowanie musi to mieć coś wspólnego z Angular-CLI. Moja wersja jest

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

angular sass angular-cli angular5
person MAhsan    schedule 11.04.2018    source źródło
comment
Sprawdź: github.com/angular/angular-cli/wiki/stories -global-styles - wystarczy dodać pliki scss do pola styles w angular.json   -  person jmdavalos    schedule 13.10.2018

Odpowiedzi (1)


arrow_upward
2
arrow_downward

Wygląda na to, że w pliku scss komponentów kątowych muszę także zaimportować wszystkie inne wymagane pliki, więc udało mi się rozwiązać ten problem, importując również pliki _functions.scss i _variables.scss. Co, jak sądzę, ma sens, ale miałem wrażenie, że angular-cli zajmie się tymi zależnościami, ponieważ wszystko to zaimportowałem do mojego głównego plikustyles.scss.

// styles.scss file
@import
'abstracts/variables',
'abstracts/functions',
'abstracts/mixins';
person MAhsan    schedule 12.04.2018