Sass中资源引用相对路径问题

Question

资源组织目录如下图：

在common.scss中使用相对路径引用了图片：

.status-unshelve{
    background-image: url(../img/status_unshelve.png);
}

目录pages中的样式文件引用了common.js：

@import '../common';

现在编译的时候就会找不到图片，如果把common中的图片引用路径改成相对于pages中文件的路径就没有问题：

.status-unshelve{
    background-image: url(../../img/status_unshelve.png);
}

但是pages中的样式文件并不一定都是同级，可能会有子目录，也会有问题。
有什么办法解决吗？

Answer 1

引入图片或者文件的时候这样

background:url('~@/images/img.png')

或者采用绝对路径

Answer 2

把图片转换成database64

data:image/png;base64,iVBORw0KGgo...

Answer 3

两种解决方式：
第一，在js中引入scss,webpack的require或者import会帮我们找到正确的图片路径
第二，使用resolve-url-loder，注意使用要在sass-loader之后

Answer 4

老哥，解决了吗？

Answer 5

把引入的scss变成一个混合样式

@mixin video-card($path){
    .video-card {
        background: url(#{$path}/wh_bg.png) center no-repeat;
    }
}

然后再引入时传入参数

.content {
    @include video-card("../../../images");
}

编译后变成

.content {
    .video-card {
        background: url(../../../images/wh_bg.png) center no-repeat;
    }
}

Answer 6

同样也碰到了这个问题，在寻求解决方案