相关疑难解决方法(0)

我正在使用字体库字体真棒.当项目没有使用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/*'
      ]
    }]
  },

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

我已经使用Yeoman和AngularJS构建了一个应用程序(以及与Grunt和Bower一样的所有内容).

当在本地运行时,它都可以正常工作grunt serve.但是,在运行grunt并部署应用程序之后,有几个缺少的资产,我不确定解决它的最佳方法是什么.

首先,运行Grunt似乎将图像复制到dist但它重命名它们而不调整CSS中的引用. app/images/uparrow.png成为dist/images/3f84644a.uparrow.png.

这是main.scss中的一行:

.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }

当它在构建过程中编译为CSS时,它不会重写路径,因此浏览器会尝试加载dist/images/uparrow.png缺少的路径.

其次,加载Bootstrap插件的字体存在问题.app/bower_components/bootstrap/dist/css/bootstrap.css引用CSS引导../fonts/glyphicons-halflings-regular.woff.相对路径得到解决,app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof并且完美运行.

一旦构建完成,供应商CSS就会合并并缩小为一个CSS文件dist/styles/8727a602.vendor.css.但是,字体的相对路径不会被重写.所以它试图在dist/fonts文件夹中查找字体,而不是dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof文件的实际位置.

任何建议都非常感谢.