Question

我有一个Angular 2应用程序，我希望使用wrapbootstrap。但我确实遇到了字体问题（bootstrap，font-awesome，google），因为我不知道如何实现它们。

当使用css文件进行wrapbootstrap时，它说找不到字体真棒：

＆＃34;无法加载资源：服务器响应状态为404（未找到）http://localhost:8000/fonts/font-awesome/fontawesome-webfont.woff2?v=4.4.0＆＃34;

我无法理解这一点，因为我可以在确切地址的Chrome控制台中看到资源中丢失的文件。

字体文件当前位于文件夹中，使用它们来自css（application.css）文件的以下相对路径：

符合css文件中所需的路径：

我希望有人可以提供一些指导，因为我迷路了。

提前致谢

解决问题显然是我的字体文件夹的位置。我的文件结构如下：

我首先添加了application.css文件所在的字体/相对位置。它必须位于我的应用程序的根目录（src）

Answer 1

添加随包管理器安装的字体通常是一项任务。例如，使用font-awesome或任何其他类似的库是一个人们需要的典型任务。

为此，您可以执行以下步骤：

在tools/config/project.config.ts：

...
    export class ProjectConfig extends SeedConfig {
        PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');

        FONTS_DEST = `${this.APP_DEST}/fonts`;
        FONTS_SRC = [
            'node_modules/bootstrap/dist/fonts/**'
        ];
...

创建文件tools/tasks/project/build.fonts.ts：

import * as gulp from 'gulp';
import Config from '../../config';

export = () => {
  return gulp.src(Config.FONTS_SRC)
        .pipe(gulp.dest(Config.FONTS_DEST));
};

在gulpfile.ts中（或在seed.tasks.json中有更新版本的种子）

// Build dev.
gulp.task('build.dev', done =>
  runSequence('clean.dev',
              'tslint',
              'build.assets.dev',
              'build.fonts',    // Added task;
              'build.js.dev',
              'build.index.dev',
              done));
// Build prod.
gulp.task('build.prod', done =>
  runSequence('clean.prod',
              'tslint',
              'build.assets.prod',
              'build.fonts',    // Added task;
              'build.html_css.prod',
              'build.js.prod',
              'build.bundles',
              'build.bundles.app',
              'build.index.prod',
              done));
// Build test.
gulp.task('build.test', done =>
  runSequence('clean.dev',
              'tslint',
              'build.assets.dev',
              'build.fonts',    // Added task;
              'build.js.test',
              'build.index.dev',
              done));

src

在角度2页

1 个答案: