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

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

先给出文件结构:

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";
【热门文章】
【热门文章】