先给出文件结构:
css
-app
--b.scss
js
-utils
--images
--a.scss
比如,你有一个组件a.scss
,该文件中有背景图的样式:
css
/*a.scss*/ .box { background:url('images/test.png') no-repeat;}
b.scss
需要导入a.scss
样式:
css
/*b.scss*/ @import "../../js/utils/a";
导入后,编译b.scss
,会得到
css
.box { background:url('images/test.png') no-repeat;}
这个结果肯定是不对的,你不可能在css
目录中找到images
目录,因为不存在的。
请问,你们如何解决这个问题?使用compass
么?
相关链接:https://github.com/sass/sass/issues/1015
比较笨的方法,你可以设置a的background url 从根目录找起~这样大家就没冲突了,
从根目录找起不失为一个方法吧~/images/xx.png
这样
以前也碰到这个问题,我们还尝试过用设变量的方法
css
/*a.scss*/ .box { background:url('#{$dir}images/test.png') no-repeat;}
然后import之前设置一下对于当前scss文件来说正确的路径
css
/*b.scss*/ $dir: '../utils/'; @import "../../js/utils/a";