Angular 5 importing SASS mixins into components

Question

In my Angular 5 project I have a separate directory for my SASS, this has all my variables, functions, and mixins. Everything is imported in my main style.scss

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

Now from my angular component SCSS file I can import the variables and use it like so

@import '~sass/abstracts/variables';

This works great but when I want to reference a mixin that in turn calls a function - but it doesn't work.

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

In my angular component I now apply it like so

.class {
   @include font-xs;
}

When I inspect element in the browser it shows

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

Update: Looks like this only happens when everything is split across the different files, but will work if all the required items are within the same sass file and then referenced within the angular components scss file.

Added an identical sass structure to this boilerplate project SASS project and it seems to work fine across multiple files, so it must definitely be something to do with the Angular-CLI. My version is

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

Check out: github.com/angular/angular-cli/wiki/stories-global-styles -- you just need to add your scss files into the styles field in angular.json — jmdavalos

MAhsan MAhsan · Accepted Answer · 2018-04-12T15:31:47

Looks like within the angular components scss file I also have to import all the other files required, so I was able to fix this issue by also importing the _functions.scss and _variables.scss. Which I guess makes sense but I was under the impression that the angular-cli will take care of these dependencies because I have all this imported in my main styles.scss.

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

Angular 5 importing SASS mixins into components

1 Answers