首页 文章

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

提问于
浏览 次
64

我正在使用字体库字体很棒 . 当项目没有使用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 -->

什么想法可能是错的？

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

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/*'
      ]
    }]
  },

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

angularjs gruntjs yeoman font-awesome

15 回答

  • 1

    如果您正在使用来自yeoman的完整的grunt任务堆栈，那么 useminPrepare 任务会在您放入 build:css 注释中的所有样式表中构建一个组合样式表 - 就像您一样 . （有关其他信息，请参阅 https://github.com/yeoman/grunt-usemin ）构建过程完成后，此文件（有点像"vendor.234243.css"）将复制到样式文件夹中 . 这就是为什么你的字体的路径不再有效 . 至少有两种可能性来解决这个问题：

    • 您可以从 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 -->
    • 通过gruntfile中的aditional grunt任务将字体 folder 作为兄弟复制到 styles 文件夹 .
    回复于
  • 7

    这会将字体复制到您需要的位置 .

    copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '.htaccess',
                    'images/{,*/}*.webp',
                    '{,*/}*.html',
                    'styles/fonts/{,*/}*.*'
                ]
            }, {
                expand: true,
                dot: true,
                cwd: 'app/bower_components/fontawesome/fonts/',
                src: ['*.*'],
                dest: '<%= yeoman.dist %>/fonts'
            }]
        },
    回复于
  • 16

    我编辑了我的Gruntfile.js如下：

    //...
copy: {
  dist: {
    files: [//... {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.dist %>/fonts'
    }]
  },
  app: {
    files: [{
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.app %>/fonts'
    }]
  }, //...
}
//...
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
  if (target === 'dist') {
    return grunt.task.run(['build', 'connect:dist:keepalive']);
  }

  grunt.task.run([
    'clean:server',
    'wiredep',
    'copy:app', // Added this line
    'concurrent:server',
    'autoprefixer:server',
    'connect:livereload',
    'watch'
  ]);
});

    我'm using yeoman 1.4.7 and its angular generator. It'非常重要的是添加copy：app而不仅仅是copy：dist task（如上所述） . 如果您输入 grunt serve 时不包含copy：app，那么's not going to work. With copy:dist you'仅考虑 grunt serve:dist

    回复于
  • 0

    我的解决方案是采用CDN方法：

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

    由于某种原因，没有一个答案有效 .

    回复于
  • 1

    对于使用 Google App Engine 的用户，以下内容适用于我：

    添加到 Gruntfile.js ：

    copy: {
  build_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= build_dir %>/fonts' 
      }
    ]
  },
  compile_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= compile_dir %>/fonts' 
      }
    ]
  }
}

    我正在使用LESS，所以我将 font-awesome.less 添加到我的 main.less 文件中 .

    @import '../../vendor/components-font-awesome/less/font-awesome.less';

    然后我将其添加到我的 app.yaml 文件中 .

    handlers:
- url: /fonts
  static_dir: static/fonts
    回复于
  • 85

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

    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 %>'
        }]
    }
}
    回复于
  • 0

    我遇到了同样的问题 . 我看了一下bower.json文件的font-awesome，发现了这个：

    {
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

    “main”数组中没有引用“font-awesome.css” . 或许，像我一样，你没有使用SASS或LESS来造型 . 所以没有为font-awesome添加任何样式 . 我修改了json文件如下：

    {
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss",
    "css/font-awesome.css",
    "fonts/fontawesome-webfont.tff",
    "fonts/fontawesome-webfont.woff",
    "fonts/fontawesome-webfont.woff2"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

    我保存并运行了咕噜声的服务，现在我的字体很棒的图标出现了 .

    希望这可以帮助 .

    回复于
  • 4

    如果您在项目中使用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";
    回复于
  • 0

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

    {
   expand: true,
   flatten: true,
   src: 'bower_components/components-font-awesome/fonts/*',
   dest: 'dist/fonts' 
}
    回复于
  • 0

    如上所述，这个对我也很有效

    // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'scripts/components/{,*/}*.html',
            'images/{,*/}*.{webp,png,jpg,jpeg,gif}',
            'fonts/*',
            'styles/fonts/{,*/}*.*',
            'services/{,*/}*.json',
            'services/mocks/{,*/}*.json'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: '.tmp/concat/scripts',
          dest: '<%= yeoman.dist %>/scripts',
          src: '{,*/}*.js'
        }, {
          expand: true,
          cwd: '.tmp/concat/styles',
          dest: '<%= yeoman.dist %>/styles',
          src: '{,*/}*.css'
        }, {
          expand: true,
          cwd: '<%= yeoman.app %>',
          src: 'styles/Bootstrap/fonts/bootstrap/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/font-awesome/fonts/',
          src: ['*.*'],
          dest: '<%= yeoman.dist %>/fonts'
        }]
      }
    回复于
  • 31

    这是解决方案：https://stackoverflow.com/a/32128931/3172813

    { 
  expand: true,
  cwd: '<%= yeoman.app %>/bower_components/font-awesome', 
  src: 'fonts/*', 
  dest: '<%= yeoman.dist %>' 
}
    回复于
  • 1

    您好主要问题是，在运行grunt任务后，font-awesome css所需的字体文件不会被复制，如果您打开chrome开发人员模式并查看，则可能会发现404找不到错误同样可以验证consoe或网络选项卡 . bootstrap也可能出现同样的问题 .

    因此，我们需要修改grunt任务，以便复制所有字体文件 .

    为字体文件添加单独的复制任务 .

    copy: {
  dist: { .....

  },
   fonts: {
    expand: true,
    flatten: true,
    cwd: '.',
    src: ['bower_components/bootstrap/fonts/*', 'bower_components/font-awesome/fonts/*'],
    dest: '<%= yeoman.dist %>/fonts',
    filter: 'isFile'
  },
  styles: { .......
  }
}

    在grunt.registerTask中注册'copy：fonts'任务，以便在构建时执行它 .

    回复于
  • 4

    最简单的方法是转到自己的 bower.json 并添加 overrides 属性 .

    {
  "name": "xxx",
  "version": "x.x.x",
  "dependencies": {
    ...,
    "fontawesome": "~4.0.3"
  },
  "devDependencies": {
    ...,
  },
  "overrides": {
    "fontawesome": {
      "main": [
        "./css/font-awesome.css"
      ]
    }
  }
}

    您必须手动将 app/fonts 文件夹中的字体复制到 app/fonts 文件夹中 . 无需编辑 Gruntfile 或 SCSS 或其他任何其他内容 .

    回复于
  • 0

    如果您正在使用SailsJS和Bower，我已经开发出一个解决Fontawesome和Bootstrap字体问题的解决方案 .

    回复于
  • 0

    我不知道我做错了什么，但提议的解决方案都没有对我有用 . 无论我尝试什么， 生产环境 （发行）版本都不会显示图标 .

    我最终使用了以下组件：https://github.com/philya/font-awesome-polymer-icons-generator和https://github.com/philya/font-awesome-polymer-icons

    font-awesome-polymer-icons-generator

    注意：需要python

    它允许您为项目中的图标（您已使用）生成字体 - 真棒SVG图标集 .

    举个例子，假设我想在我的项目中使用图标 code, line-chart, github-alt ，那么我会像这样生成它们：

    ./makefaicons.py myappname code line-chart github-alt

    这会生成文件 build/myappname-icons.html . 然后，需要将此文件导入到我的组件中，就像任何其他组件一样：

    <link rel="import" href="<pathToFile>/myappname-icons.html">

    那么我可以得到像这样的字体真棒图标：

    <core-icon icon="myappname:line-chart"></core-icon>

    即我在名称为I的正常字体名称前加上前缀在我创建图标集时给出了 .

    font-awesome-polymer-icons

    您还可以导入预先构建的全套font-awesome图标：

    bower install font-awesome-polymer-icons

    请记住，这会为您的分发大小增加300 KB，并且作者指出不建议将其用于 生产环境 用途 .

    回复于

相关问题