鍍金池/ 問(wèn)答/HTML/ 利用gulp實(shí)現(xiàn)將css文件加入到HTML的style標(biāo)簽內(nèi)部

利用gulp實(shí)現(xiàn)將css文件加入到HTML的style標(biāo)簽內(nèi)部

由于不能使用link標(biāo)簽
想實(shí)現(xiàn)類(lèi)似于模塊加載的效果如下圖所示

clipboard.png

但是gulp-file-include插件加載css模塊會(huì)報(bào)錯(cuò)，有沒(méi)有大神有好的解決辦法

回答
編輯回答
誮惜顏

可以使用 gulp-inject 來(lái) 實(shí)現(xiàn)樓主的 想法

2017年4月30日 03:17
編輯回答
逗婦乳

我先到一種，就是你在html文件創(chuàng)建一個(gè)<style>錨，然后通過(guò)gulp與through之間的配合，得到css問(wèn)價(jià)你的樣式字符串，然后在html中的錨通過(guò)正則替換添加樣式字符串；
gulp.task('cssInsert',function (cb) {

gulp.src('./css/common.min.css')
    .pipe(through.obj(function(file,enc,cb){
        str = file.contents.toString(); //得到css中的樣式并轉(zhuǎn)化成字符串，保存在一個(gè)全局變量中
        cb();}))

});

2018年9月3日 20:18