Font Удивительная неопределенная переменная в задаче Gulp SaSS - PullRequest
Новая
       39

Font Удивительная неопределенная переменная в задаче Gulp SaSS

0 голосов
/ 07 ноября 2018

У меня проблемы с включением Font Awesome Scss / Sass в мой проект Gulp. Использование шрифтов через html работает нормально ... вроде это не вызывает проблем. Но когда я пытаюсь использовать в своих файлах sass потрясающие миксины, выдает ошибку задачи 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
@import 'fontawesome/fontawesome',
        'fontawesome/solid',
        'fontawesome/brands';

Я получаю ошибку, когда пытаюсь сослаться на миксины и переменные в моих файлах scss. 

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

Тем не менее, миксины и переменные из шрифта awesome не распознаются. У кого-нибудь есть какие-либо идеи? Все объединяется в dist / styles.css, на который ссылается BrowserSync.

1 Ответ

0 голосов
/ 07 ноября 2018

Разобрался, и это был шок.

В моем собственном scss есть собственный файл mixins и переменных на верхнем уровне папки css.

Чтобы решить эту проблему, мне нужно было импортировать потрясающие миксины шрифта прямо в мой файл миксинов, а переменные шрифта - в файл переменных. 

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

Решено!

...