javascript - Gulp-clean-css 컴파일 후 URL 문제

Question

gulp를 사용하여 CSS를 압축한 후 문제가 발생했습니다. 파일 디렉터리는 다음과 같습니다.

으아아아

main.css의 특정 스타일:

으아아아

import.css:

으아아아

이제 꿀꺽꿀꺽 컴파일을 해보세요:

으아아아

이제 문제는 컴파일된 CSS가 모두 import.css에 있다는 것입니다. 이때 URL의 올바른 경로는
url('../images/header.png')이어야 하지만 지금은 여전히 ​​(' .. /../images/header.png'), 해당 이미지 리소스를 찾을 수 없습니다.

src에서 절대 경로인 url('/static/src/images/header.png')을 사용한 후, 컴파일 후에 올바른 URL은 url('/static/dist/images/header.png')이어야 합니다.

gulp-clean-css를 사용할 때 URL을 올바르게 전환하는 방법은 무엇입니까?

감사합니다.

Answer 1

gulp-clean-css는 내부적으로 clean-css를 사용하는 gulp 플러그인이므로 clean-css 프로젝트 홈페이지로 이동하여 해결 방법을 찾을 수 있습니다.

https://github.com/jakubpawlo...

원격 @imports를 올바르게 처리하는 방법 장에 관련 솔루션이 있는데, 이는 일반적인 문제인 것 같습니다.

원격 @import 문을 인라인하려면 원격 자산을 가져오는 비동기@import statements you need to provide a
callback to minify method as fetching remote assets is an asynchronous
operation, e.g.:

var source = '@import url(http://example.com/path/to/remote/styles);';
new CleanCSS({ inline: ['remote'] }).minify(source, function (error, output) {
  // output.styles
});

f you don't provide a callback, then remote @imports작업이므로 메서드를 축소하기 위한
콜백을 제공해야 합니다. 예:

으아아아

콜백을 제공하지 않으면 원격 @imports는

is.

로 남게 됩니다. 🎜 🎜매개변수 추가: 🎜 으아아아