gulp-cssimport 不调整图像的相对路径

Question

我正在使用 gulp-cssimport 导入不同的 css 文件，但是当我使用相对路径导入图像时，转换后的图像的路径不会转换为正确的路径。

文件结构

src/css/channel/index.css

@import url('../mod/common/common.css');

src/css/mod/common/common.css

body {
    background-image: url('../../imgs/1.jpg');
}

h1 {
    color: red;
    font-weight: normal;
    text-align: center;
}

dist/css/channel/index.css

body {
    background-image: url('../../imgs/1.jpg');
}

h1 {
    color: red;
    font-weight: normal;
    text-align: center;
}

Answer 1

您的dist/css/channel/index.css 的目录看起来太高了。

代替：

background-image: url('../../imgs/1.jpg');

您正在寻找：

background-image: url('../imgs/1.jpg');

这是因为imgs 是channel 的兄弟。