使用 grunt 构建项目时,Fontawesome 不起作用 [英] Fontawesome is not working when project is built with grunt
问题描述
我使用的字体库字体很棒.当项目不是用 grunt 构建/丑化时,它可以工作.
I'm using the font library font awesome. It works when the project is not built/uglified with grunt.
但是当我用 grunt 构建项目时,它不起作用.我在控制台中收到此错误:.../fonts/fontawesome-webfont.woff?v=4.0.3 404 (Not Found)
But when I'm building the project with grunt it's not working. I get this error in console: .../fonts/fontawesome-webfont.woff?v=4.0.3 404 (Not Found)
我已经与 yeoman 一起搭建了这个项目.
I've scaffolded the project with yeoman.
这是我在 index.html 中的引用
This is my ref in index.html
<!-- build:css styles/fontawesome.css -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- endbuild -->
有什么想法可能是错的吗?
Any ideas what can be wrong?
更新我需要将文件夹/bower_components/font-awesome/fonts 复制到 dist/fonts.这需要在 grunt 文件中完成.可能在复制"选项下
Update I need to copy the folder /bower_components/font-awesome/fonts to dist/fonts. This needs to be done in the grunt-file. Probably under the "copy" options
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/*'
]
}]
},
但我不确定在哪里包含它.
But I'm not really sure where to include this.
推荐答案
我遇到了同样的问题.以下代码解决了我的问题.
I had the same problem. The following code solved my problem.
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 %>'
}]
}
}
这篇关于使用 grunt 构建项目时,Fontawesome 不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!