当项目使用grunt构建时,Fontawesome无法正常工作

Question

我正在使用字体库字体真棒.当项目没有使用grunt构建/使用时,它可以工作.

但是,当我用咕噜声构建项目时,它无法正常工作.我在控制台中收到此错误:.../fonts/fontawesome-webfont.woff？v = 4.0.3 404(未找到)

我和自耕农一起搭建了这个项目.

这是我在index.html中的参考

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

什么想法可能是错的？

更新 我需要将文件夹/ bower_components/font-awesome/fonts复制到dist/fonts.这需要在grunt文件中完成.可能在"复制"选项下

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'images/{,*/}*.{gif,webp}',
        'styles/fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: [
        'generated/*'
      ]
    }]
  },

但我不确定在哪里包括这个.

Answer 1

我有同样的问题.以下代码解决了我的问题.

copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= config.app %>',
            dest: '<%= config.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.webp',
                '{,*/}*.html',
                'styles/fonts/{,*/}*.*'
            ]
        },{
            expand: true,
            dot: true,
            cwd: 'bower_components/bootstrap/dist', // change this for font-awesome
            src: ['fonts/*.*'],
            dest: '<%= config.dist %>'
        }]
    }
}

Answer 2

如果您在项目中使用SASS,我发现一种更简单的方法,如果有人感兴趣,则不涉及更改grunt文件:

http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

基本上在main.scss文件的顶部包含这两行,字体应该可以工作.

$fa-font-path: "/bower_components/font-awesome/fonts/";
@import "font-awesome/scss/font-awesome";

Answer 3

如果您正在使用来自yeoman的完整的grunt任务堆栈,那么该useminPrepare任务将构建一个样式表,该样式表来自您在build:css评论中添加的所有样式表- 就像您一样.(参见https://github.com/yeoman/grunt-usemin其他信息)完成构建过程后,此文件 - 有点像"vendor.234243.css"被复制到样式文件夹中.这就是为什么你的字体的路径不再有效.至少有两种可能性来解决这个问题:

1. 您可以从build:css块中删除font-awesom css :

   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
   <!-- build:css styles/fontawesome.css -->
    this will be processed by useminPrepare 
   <!-- endbuild -->
   

2. 通过gruntfile中的aditional grunt任务将字体folder作为兄弟styles文件复制到该文件夹.

Answer 4

我能够通过将以下内容添加到copy.dist.files来解决问题:

{
   expand: true,
   flatten: true,
   src: 'bower_components/components-font-awesome/fonts/*',
   dest: 'dist/fonts' 
}