说明
- 这篇blog以实际问题驱动来写；
- Q: 表示问题表述；
Q: 在实际项目中，font-awesome.css在编译到dest目录生成krp_index.css，并加载到页面，css引用的图片路径出错，无法加载；
页面分页的上下翻页的图标消失了，下图红框标注处：
分页上下图标消失了
Q:为什么会产生这个问题
下面寻找导致这个问题的原因
图标由css@font-face定义
以上图标的定义在krp_index.css中定义如下
@font-face { font-family: 'FontAwesome';
src: url("../../font/fontawesome-webfont.eot?v=3.1.0");
src:
url("../../font/fontawesome-webfont.eot?#iefix&v=3.1.0") format('embedded-opentype'),
url("../../font/fontawesome-webfont.woff?v=3.1.0") format('woff'),
url("../../font/fontawesome-webfont.ttf?v=3.1.0") format('truetype'),
url("../../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0") format('svg');
font-weight: normal; font-style: normal;
}
源文件font-awesome.css中的定义
与源文件font-awesome.css的@font-face的定义比较，发现他们的url设置是一样的
@font-face { font-family: 'FontAwesome';
src: url("../../font/fontawesome-webfont.eot?v=3.1.0");
src:
url("../../font/fontawesome-webfont.eot?#iefix&v=3.1.0") format('embedded-opentype'),
url("../../font/fontawesome-webfont.woff?v=3.1.0") format('woff'),
url("../../font/fontawesome-webfont.ttf?v=3.1.0") format('truetype'),
url("../../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0") format('svg');
font-weight: normal; font-style: normal;
}
查看目录font与krp_index.css文件的目录层级关系
- 通过查看dest目录下font和krp_index.css文件的层级关系，发现他们只是上下单层层级；
- 而源文件与font目录是两层层级，中间多了一个lib目录层；
- so,从源文件编译到目标文件，目录层级发生了改变，但css引用的font文件路径却没改变，因此导致这个问题；
源文件font-awesome.css与font的层级关系:
源文件font-awesome.css与font的两层层级关系
目标文件krp_index.css与font的层级关系：
目标文件krp_index.css与font的单层层级关系
Q:怎么办？
在google上搜到一个gulp-modify-css-urls插件，可以帮助我们解决这个issue;
我是这样使用的:
var modifyCssUrls=require('gulp-modify-css-urls');
....
.pipe(concat('krp_index.css'))
.pipe(modifyCssUrls(
{
modify: function (url, filePath) {
if (url.indexOf('fontawesome-webfont') != -1) {
return url.substring(3)
}
}
})
)
gulp-modify-css-urls 会去遍历css里的所有url；
modifyCssUrls方法会去遍历krp_index.css文件流中的所有url;对每个url的处理函数你可以自定义；
比如我定义的当url包含'fontawesome-webfont'字符串的时候，截取并返回从第3个字符开始到字符串末尾的字符串
然后生成的krp_index.css中@font-face的定义是这样的
在如下的@font-face路径设置下，the issue is fixed;
@font-face { font-family: 'FontAwesome';
src: url("../font/fontawesome-webfont.eot?v=3.1.0");
src:
url("../font/fontawesome-webfont.eot?#iefix&v=3.1.0") format('embedded-opentype'),
url("../font/fontawesome-webfont.woff?v=3.1.0") format('woff'),
url("../font/fontawesome-webfont.ttf?v=3.1.0") format('truetype'),
url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0") format('svg');
font-weight: normal; font-style: normal;
}
