使用gulp-compass时，指定relative_assets无效

标签：

结语：

　　使用gulp-compass时，需要指定 relative:false ，绝对定位 ( 如http_images_path参数 ) 才有效，代码：

gulp.task(‘compass‘, function() {
    gulp.src(‘sass/{,*/}*.scss‘)
        .pipe(compass({
            config_file: ‘./config.rb‘,
            css: ‘../css.release/touch‘,
            sass: ‘sass‘,
            relative:false
        })).pipe(reload({
            stream: true
        }));
});

故事前景：

　　之前在项目当中使用的是Grunt构建的项目，但在compass + bowser-sync结合使用时，刷新的速度实在太慢，达到 2.0+s 以上，所以就改阵营到Gulp了。

　　调换Gulp时，测试重新生成CSS文件，但看不见界面的图标，查看源文件时图片都显示的是相对定位。它长这样：　　

.icon-clock{
    background: url(‘../../index.png‘) no-repeat;
}

　　图片地址不对，所以显示不出来。

　　这不是我想要的，我想要它这样：

.icon-clock{
    background: url(‘http://www.sucool.com/index.png‘) no-repeat;
}

　　源码使用了compass的img-url，这样我可以随意更改图片的位置，比如更改域名了呀什么的：

.icon-clock{
    background: image-url(‘index.png‘) no-repeat;
}

思考历程：

　　　　1.我已经指定了config.rb文件的，http_images_path参数；

　　　　2.设定relative_assets=false，还是没有作用；

　　　　3.再在gulp配置的地方，添加相关的参数 relative ，OK。

end: 在grunt-compass中，只要config.rb文件中指定了 http-images-path参数，生成的css中的图片地址就会是绝对定位的，不料想gulp-compass需要这样。

使用gulp-compass时，指定relative_assets无效

标签：

原文地址：http://www.cnblogs.com/hhyaner/p/5006687.html