css - SCSS 在从不同文件夹导入时未正确传递相对图像引用

Question

我正在使用 SCSS 开发网站，但在导入文件时相对图像路径无法正常工作。这就是我的意思:

目录结构

./
    css/
        main-code.scss
        common/
            include.scss
    images/
        image.jpg

include.scss

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

ma​​in-code.scss

@import("common/include.scss");

我的 include.scss 文件包含对 image.jpg 的正确相对引用。但是当我将它导入位于不同目录中的 main-code.scss 时，图像的链接被破坏了，因为它仍然显示为 url('../../images/image.jpg') — 如果我们在目录结构中启动一个文件夹，这将不再是对图像的有效引用。

有什么方法可以包含 SCSS 文件并适本地自动调整相对路径吗？或者我是否需要将我的两个 SCSS 文件放在一个文件夹中才能正常运行？

Answer 1

我是这样修复的:

$default_path_dept: '../../' !default;

然后是一些css值

background: #fff url('#{$default_path_dept}default/img/textbox-valid.png')

然后在其他更高目录的文件中

$default_path_dept: '../../../../';
@import "#{$default_path_dept}default/css/global.scss";

这样你就可以修复丢失的图片