毅窝疯

Using gulp-clean-css, font file paths specified in url() setting a wrong path

By hybnx 2019-06-28 JAVASCRIPT 来源:本站 访问:222

使用 gulp-clean-css 时,默认将背景图url替换;

例如:

scss中代码为:

background-image: url('../images/load.png');

使用 gulp-clean-css 编译后:

background-image:url(images/load.png)
或者是其他路径

 

解决方法:

cleancss使用时增加如下配置:

cleanCSS({rebase: false})

 

参考资料:

in clean-css v4.0:

root, relativeTo, and target options are replaced by a single rebaseTo option - this means that rebasing URLs and import inlining is much simpler but may not be (YMMV) as powerful as in 3.x;

The rebase is defaulted to true

rebase - controls URL rebasing; defaults to true;

this looks like it will get the relative path of the project and rebase it, which is what @angularPublic and I are experiencing.

I'm guessing all of us have the same pipe for this:

  • gulp.src from a lib/src/app/scripts folder
    • cleanCSS
      • gulp.dest to a distributed folder

at the point of setting the url() it's getting the relative path of the gulp.src and rebasing it on that, which by our build step is not desired.

rebaseTo - .., defaults to the current directory;

So don't rebase and let the browser handle the relative path.