使用gulp-compass时,指定relative_assets无效
2015-11-30 11:23
405 查看
结语:
使用gulp-compass时,需要指定 relative:false ,绝对定位 ( 如http_images_path参数 ) 才有效,代码:
故事前景:
之前在项目当中使用的是Grunt构建的项目,但在compass + bowser-sync结合使用时,刷新的速度实在太慢,达到 2.0+s 以上,所以就改阵营到Gulp了。
调换Gulp时,测试重新生成CSS文件,但看不见界面的图标,查看源文件时图片都显示的是相对定位。它长这样:
图片地址不对,所以显示不出来。
这不是我想要的,我想要它这样:
源码使用了compass的img-url,这样我可以随意更改图片的位置,比如更改域名了呀什么的:
思考历程:
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: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需要这样。
相关文章推荐
- centos7.0 php-fpm 安装ImageMagic php扩展imagick
- 不确定个数的元素在水平方向上平均分布
- MSSQL 2012 拒绝了对对象 'extended_properties' (数据库 'mssqlsystemresource',架构 'sys')的 SELECT 权限
- 添加Root权限用户(超级用户)方法
- MySQL 如何快速导入 dump.sql 到数据库中?
- 滚动到页面底部触发分页事件
- String int类型相互转换
- Mysql XX 天之内
- JMeter 分布式性能测试
- 【css】盒子模型 之 弹性盒模型
- 判断一个字符串同时出现几个字符的C#版本和JS版本
- iOS 如何通过 找到QQ 微信 支付宝等常用App的 URl schemes
- E: Unable to locate package...
- jQuery动态添加删除select项(实现代码)
- Swift UIview的 层次交换 和部分动画的详解
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
- 怎么取消 Windows Server 2012 RDP 限制每个用户只能进行一个会话
- ios 开发日记 23 - Reveal使用步骤
- Linux下SVN安装配置
- javascript获取鼠标点击位置的兼容写法