Question

我在将Gut项目中包含Font Awesome Scss / Sass遇到问题。通过html使用字体效果很好。但是，当我尝试在我的sass文件中使用真棒混音字体时，Sass任务会出错：

$ git status
On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

    new file:   README

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   CONTRIBUTING.md

这是我的文件结构

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

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

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

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

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

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

我也尝试用这种方式

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

仍然无法识别来自字体真棒的混合和变量。有人有什么想法吗？一切都连接到dist / styles.css中，这是BrowserSync引用的。

Answer 1

弄清楚了，这真是令人震惊。

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

要解决此问题，我需要将真棒字体mixins直接导入我的mixins文件中，并将真棒字体变量导入我的变量文件中。

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

解决了！

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

1 个答案: