Font Awesome undefined variable in Gulp SaSS task

Question

I am having issues with including Font Awesome Scss / Sass into my Gulp project. Using the fonts via html works fine.. like This shows up no problem. But when I try to use the font awesome mixins in my sass files, Sass task errors out:

events.js:183
      throw er; // Unhandled 'error' event
      ^
Error: toolkit\dev\css\_placeholders.scss
Error: Undefined variable: "$fa-var-user".
        on line 269 of toolkit/dev/css/_placeholders.scss
        from line 13 of toolkit/dev/css/base.scss
>>       content: fa-content($fa-var-user);

This is my file structure

dev
  |-css
    |--fontawesome(folder)
      |---all fontawesome scss files
    |--modules(folder with all my sass)
    |--base.scss
  |-webfonts

dist
  |-css
    |--styles.css
  |-webfonts

In the base.scss file I am importing my various scss partials and the fontawesome partials:

//FontAwesome
@import 'fontawesome/fontawesome',
        'fontawesome/solid',
        'fontawesome/brands';

I get the error when i try to reference the mixins and variables in my scss files.

.user {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

I also tryied using it this way

.user {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

and get the following error:

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error: toolkit\dev\css\_placeholders.scss
Error: no mixin named fa-icon
        on line 265 of toolkit/dev/css/_placeholders.scss
        from line 13 of toolkit/dev/css/base.scss
>>     @include fa-icon;
   -------------^

This is my gulp sass task

gulp.task('sass', function() {
    return gulp.src("toolkit/dev/css/**/*.scss")
        .pipe(wait(1500))
        .pipe(sass({ includePaths: ["toolkit/dev/css"] }))
        .pipe(sass().on('error', sass.logError))
        .pipe(concat("styles.css"))
        .pipe(gulp.dest("toolkit/dist/css/"))
        .pipe(browserSync.stream());
});

Still the mixins and variables from font awesome are unrecognized. Does anyone have any ideas? Everything concatenates into the dist/styles.css which is what BrowserSync references.

Answer 1

Figured it out and it was a shocker.

My custom scss has it's own mixins and variables file in at the top level of the css folder.

To fix the issue I needed to import the font awesome mixins directly into my mixins file and the font awesome variables into my variables file.

dev
  |-css
    |--fontawesome(folder)
      |---all fontawesome scss files
    |--modules(folder with all my sass)
    |--mixins.scss (import fontawesome mixin here)
    |--variables.scss (import fontawesome variables here)
    |--base.scss
  |-webfonts

Solved!