Gulp SaSS 任务中的 Font Awesome 未定义变量答案

【问题标题】：Font Awesome undefined variable in Gulp SaSS taskGulp SaSS 任务中的 Font Awesome 未定义变量
【发布时间】：2018-11-06 21:43:59
【问题描述】：

我在将 Font Awesome Scss / Sass 包含到我的 Gulp 项目中时遇到问题。通过 html 使用字体可以正常工作.. 就像这显示没有问题。但是当我尝试在我的 sass 文件中使用字体 awesome mixins 时，Sass 任务会出错：

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);

这是我的文件结构

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

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

在 base.scss 文件中，我正在导入各种 scss 部分和 fontawesome 部分：

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

当我尝试在我的 scss 文件中引用 mixins 和变量时出现错误。

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

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

我也试过这样用

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

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

并得到以下错误：

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;
   -------------^

这是我的 gulp sass 任务

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());
});

仍然无法识别来自 font awesome 的 mixins 和变量。有没有人有任何想法？一切都连接到 dist/styles.css 中，这是 BrowserSync 所引用的。

【问题讨论】：

标签： sass gulp font-awesome gulp-sass font-awesome-5

【解决方案1】：

想通了，这令人震惊。

我的自定义 scss 在 css 文件夹的顶层有它自己的 mixins 和变量文件。

为了解决这个问题，我需要将 font awesome mixins 直接导入我的 mixins 文件，并将 font awesome 变量导入我的变量文件。

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

解决了！

【讨论】：