gulp concat JS libraries CSS - css

Question

I am using gulp concat to combine all JavaScript libraries CSS file into one. My gulp task looks something like this:
gulp.task('concatcss', function() {
return gulp.src('assets/libs/**/*.css')
.pipe(concatCss("all.css").on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('dist'));
});
It does work to combine all CSS into one. However, the problem is as the path is changed, any CSS linked file such as url("../fonts/glyphicons-halflings-regular.woff") will fail to load.
How can I overcome the issue? Is there anyway for it to automatically change the path based on the new output CSS file location?

Answer 1

You need to set concatcss options rebaseUrls to false, its true by default
rebaseUrls: (default true) Adjust any relative URL to the location of the target file.
Example:
concatCss(targetFile, {rebaseUrls:false})
In your own case:
gulp.task('concatcss', function() {
return gulp.src('assets/libs/**/*.css')
.pipe(concatCss("all.css", {rebaseUrls:false}).on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('dist'));
});
Other Options (since 2.1.0)
inlineImports: (default true) Inline any local import statement found
rebaseUrls: (default true) Adjust any relative URL to the location of the target file.
includePaths: (default []) Include additional paths when inlining imports
NB:
for a proper import inlining and url rebase, make sure you set the proper base for the input files.

Answer 2

You have to add the base option to gulp.src like this: { base: 'dist' }
Your code reworked:
gulp.task('concatcss', function() {
return gulp.src('assets/libs/**/*.css', { base: 'dist'})
.pipe(concatCss("all.css").on('error', standardHandler))
.pipe(minifyCss().on('error', standardHandler))
.pipe(gulp.dest('dist'));
});