說明
- 這篇blog以實(shí)際問題驅(qū)動(dòng)來寫屈藐；
- Q: 表示問題表述；
Q: 在實(shí)際項(xiàng)目中，font-awesome.css在編譯到dest目錄生成krp_index.css娘荡，并加載到頁面，css引用的圖片路徑出錯(cuò)驶沼，無法加載炮沐；
頁面分頁的上下翻頁的圖標(biāo)消失了，下圖紅框標(biāo)注處：
分頁上下圖標(biāo)消失了
Q:為什么會(huì)產(chǎn)生這個(gè)問題
下面尋找導(dǎo)致這個(gè)問題的原因
圖標(biāo)由css@font-face定義
以上圖標(biāo)的定義在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的定義比較回怜，發(fā)現(xiàn)他們的url設(shè)置是一樣的
@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文件的目錄層級(jí)關(guān)系
- 通過查看dest目錄下font和krp_index.css文件的層級(jí)關(guān)系大年，發(fā)現(xiàn)他們只是上下單層層級(jí)；
- 而源文件與font目錄是兩層層級(jí)玉雾，中間多了一個(gè)lib目錄層翔试；
- so,從源文件編譯到目標(biāo)文件，目錄層級(jí)發(fā)生了改變复旬，但css引用的font文件路徑卻沒改變垦缅，因此導(dǎo)致這個(gè)問題；
源文件font-awesome.css與font的層級(jí)關(guān)系:
源文件font-awesome.css與font的兩層層級(jí)關(guān)系
目標(biāo)文件krp_index.css與font的層級(jí)關(guān)系：
目標(biāo)文件krp_index.css與font的單層層級(jí)關(guān)系
Q:怎么辦驹碍？
在google上搜到一個(gè)gulp-modify-css-urls插件壁涎，可以幫助我們解決這個(gè)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 會(huì)去遍歷css里的所有url；
modifyCssUrls方法會(huì)去遍歷krp_index.css文件流中的所有url;對(duì)每個(gè)url的處理函數(shù)你可以自定義志秃；
比如我定義的當(dāng)url包含'fontawesome-webfont'字符串的時(shí)候怔球，截取并返回從第3個(gè)字符開始到字符串末尾的字符串
然后生成的krp_index.css中@font-face的定義是這樣的
在如下的@font-face路徑設(shè)置下，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;
}
