时间戳

首页 > 解决方案 > SCSS 在从不同文件夹导入时未正确传递相对图像引用

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

问题描述

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

目录结构

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

包括.scss

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

主代码.scss

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

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

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

标签： cssimportsass

解决方案

这就是我修复它的方法：

$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";

这样您就可以修复丢失的图像

推荐阅读