如何使用gulp sass自定义字体

喂，我在学密码。我不能让我的sass文件工作。我想添加其他字体，如Roboto和Raleway。其他一切都好，除了字体的东西

我将它们与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"
  }
}

My 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']);

还有我的俏皮话：

$title: 'Roboto';

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

---

你能给我一个提示吗？

好的！所以我想出来了

我在我的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;
}

：）