gulp-sass : 접두어 추가를 비활성화하는 방법 배경 이미지의 경로

Question

안녕하세요!

저는 웹 앱을 개발하고 gulp-sass를 사용하여 파일을 CSS로 컴파일합니다.

도식 프로젝트 구조 : component.scss 내부

build/ 
    -image.png 
    -build.css 
src/ 
    -app/ 
    -component_1/ 
     -component.scss 

:

다음

div.component { 
    background: url("/image.png") no-repeat center center; 
} 

컴파일 말대꾸에 대한 책임을 내 꿀꺽 스크립트, CSS로이다 :

gulp.task('sass', function() { 
    return gulp.src("src/app/**/*.scss") 
    .pipe(sass().on("error", sass.logError)) 
    .pipe(gulp.dest("./sass.compiled/")) 
    .pipe(concatCss("build.css")) 
    .pipe(gulp.dest("build")); 
}); 

결과 : gulp-scss는 백그라운드의 url 속성 앞에 'component_1'경로를 추가합니다. 그래서 그 대신 예상 :

background: url("/image.png") no-repeat center center; 

내가 얻을 :

background: url("component_1/image.png") no-repeat center center; 

, 나는 그런 행동을 방지하기 위해 꿀꺽 - 말대꾸를 만들 수있는 방법이 있나요?

Answer 1

이것은 원인이되는 gulp-sass이 아니지만 gulp-concat-css입니다.

을 병합 CSS 파일 (표준에 따라) @import 문을 버블 링 및 선택적으로 리베이스 URL을 지역 @import 문을 인라인 다음 package description 상태로.

선택적 URL 리베이스를 비활성화해야합니다. 을 사용하면 이렇게 할 수 있습니다.