A problem occurs after using gulp to compress CSS. The file directory is as follows:
static/
src/
images/
header.png
css/
pages/
main.css
xxx.css
import.css
dist/
A certain style in main.css:
.header-area {
background: url('../../images/header.png')
}
import.css:
@import pages/main.css
@import pages/xxx.css
Now compile with gulp:
gulp.task('minifycss', function(){
gulp.src('src/css/**/*.css')
.pipe(cleanCss())
.pipe(concat(import.css))
.pipe(gulp.dest('dist/css/'))
})
One problem that exists now is that the compiled css is all in import.css. At this time, the correct path of the url should be
url('../images/header.png'), but it is still ('../../images/header.png'), the corresponding image resource cannot be found.
, use the absolute path, url('/static/src/images/header.png') in src, but after compilation, the correct url should be url('/static/dist/images/header.png').
How to switch the URL correctly when using gulp-clean-css?
Thanks.
gulp-clean-css is just a gulp plug-in, which uses clean-css internally, so you can go to the clean-css project homepage to find solutions:
https://github.com/jakubpawlo...
There is a relevant solution in the How to process remote @imports correctly? chapter, which seems to be a common problem.
Add a parameter: