Answer the question
In order to leave comments, you need to log in
Why is font-face not included in sass when compiling to css with gulp?
I use mixin font face
// =============================================================================
// String Replace
// =============================================================================
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// =============================================================================
// Font Face
// =============================================================================
@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
$src: null;
$extmods: (
eot: "?",
svg: "#" + str-replace($name, " ", "_")
);
$formats: (
otf: "opentype",
ttf: "truetype"
);
@each $ext in $exts {
$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
}
@font-face {
font-family: quote($name);
font-style: $style;
font-weight: $weight;
src: $src;
}
}
@include font-face("Jura-Regular", fonts/Jura-Regular);
[18:38:16] Using gulpfile D:\www\site\gulpfile.js
[18:38:16] Starting 'sass'...
events.js:160
throw er; // Unhandled 'error' event
^
Error: app\sass\_fonts.sass
Error: Invalid CSS after '...$replace: "") {': expected "}", was "{"
on line 5 of app/sass/_fonts.sass
>> -replace($string, $search, $replace: "") { {
------------------------------------------^
at options.error (D:\www\site\node_modules\node-sass\lib\index.js:291:26)
gulp.task('sass', function() {
return gulp.src('app/sass/**/*.sass')
.pipe(sass())
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade:true}))
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({stream: true}))
});
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question