sass文件import文件引起的background地址编译错误

Question

先给出文件结构：

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

Answer 1

从根目录找起不失为一个方法吧~
/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";

Answer 2

如果在经过webpack打包，路径还是不对，

最后我的解决办法是将背景图片的样式写在了行内 这样就不用去考虑那些路径问题了

Answer 3

比较笨的方法，你可以设置a的background url 从根目录找起~这样大家就没冲突了，