gulp-sassのカスタムフォントへの方法

Question

Hullo、私はコードを学習しています。そして、私は自分のお尻のファイルを動作させることはできません。私はRobotoやRalewayのような他のフォントを追加したいと思います。フォントのものを除いて他のすべてはOKです！

私はNPMでそれらを使用して、ここに私のパッケージがJSONである

：

{ 
"name": "presentation_onedrive_v3", 
    "version": "1.0.0", 
    "description": "Formation OneDrive", 
    "main": "index.js", 
    "scripts 
": { 
    "test": ";)" 
    }, 
    "keywords": [ 
    "formation", 
    "onedrive" 
    "video" 
    ], 
    "author": "toutou", 
    "license": "ISC", 
    "devDependencies": { 
    "bootstrap-sass": "^3.3.7", 
    "gulp": "^3.9.1", 
    "gulp-autoprefixer": "^4.0.0", 
    "gulp-clean-css": "^3.4.1", 
    "gulp-compass": "^2.1.0", 
    "gulp-cssbeautify": "^0.1.3", 
    "gulp-csscomb": "^3.0.8", 
    "gulp 

-rename": "^1.2.2", 
    "gulp-sass": "^3.1.0" 
    }, 
    "dependencies": { 
    "sass-font-face": "^1.0.1" 
    } 
} 

マイgulpfile.js：

/* gulpfile.js */ 
var 
    gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    comb = require('gulp-csscomb'), 
    beautify = require('gulp-cssbeautify'), 
    autoprefixer = require('gulp-autoprefixer'), 
cleanCSS = require('gulp-clean-css'); 
rename = require('gulp-rename'); 

// source and distribution folder 
var 
    source = 'src/', 
    dest = 'dist/'; 

// Bootstrap scss source 
var bootstrapSass = { 
     in: './node_modules/bootstrap-sass/' 
    }; 

// fonts 
var fonts = { 
     in: [source + 'fonts/*.*', bootstrapSass.in + 'assets/fonts/**/*'], 
     out: dest + 'fonts/' 
    }; 

// css source file: .scss files 
var scss = { 
    in: source + 'scss/*.scss', 
    out: dest + 'css/', 
    watch: source + 'scss/**/*', 
    sassOpts: { 
     outputStyle: 'nested', 
     precison: 3, 
     errLogToConsole: true, 
     includePaths: [bootstrapSass.in + 'assets/stylesheets'] 
    } 
}; 


// copy bootstrap required fonts to dest 
gulp.task('fonts', function() { 
    return gulp 
     .src('src/scss/polices/**/*') 
     .pipe(gulp.dest('dist/css/polices')); 
}); 

// compile scss 
gulp.task('sass', ['fonts'], function() { 
    return gulp.src(scss.in) 
     .pipe(sass(scss.sassOpts)) 
     .pipe(autoprefixer('last 2 versions')) 
     .pipe(comb()) 
     .pipe(beautify({indent: ' '})) 
     .pipe(gulp.dest(scss.out)); 
}); 

// minify css 
gulp.task('minify-css', function() { 
    return gulp.src('dist/css/*.css') 
    .pipe(cleanCSS({compatibility: 'ie8'})) 
    .pipe(gulp.dest('dist/css/')); 
}); 

// watch sass 
gulp.task('watch', ['sass'], function() { 
    gulp.watch(scss.watch, ['sass']); 
}) 

// default task 
gulp.task('default', ['watch', 'minify-css']); 

そして、私のSASS：

$title: 'Roboto'; 

@font-face { 
    font-family: 'Roboto'; 
    src:url('polices/Roboto/Roboto/Roboto-light.ttf'); 
} 

あなたが与えてくださいでした私はヒントですか？

Answer 1

OK！だから、私は私のSCSSファイルにインポート

...それをうまく：

@import url(https://fonts.googleapis.com/css?family=Raleway|Roboto); 

私が作成し、変数：

$title: Raleway; 
$sub-title: Roboto; 

そして、私はスタイルがいつものように実行します。

.button { 
    font-family: $font-stack; 
    background-color: $primary-color; 
} 

:)