我正在使用 SCSS 开发网站,但在导入文件时相对图像路径无法正常工作。这就是我的意思:
目录结构
./
css/
main-code.scss
common/
include.scss
images/
image.jpg
include.scss
body {
background-image: url('../../images/image.jpg');
}
main-code.scss
@import("common/include.scss");
我的 include.scss 文件包含对 image.jpg 的正确相对引用。但是当我将它导入位于不同目录中的 main-code.scss 时,图像的链接被破坏了,因为它仍然显示为 url('../../images/image.jpg')
— 如果我们在目录结构中启动一个文件夹,这将不再是对图像的有效引用。
有什么方法可以包含 SCSS 文件并适本地自动调整相对路径吗?或者我是否需要将我的两个 SCSS 文件放在一个文件夹中才能正常运行?
最佳答案
我是这样修复的:
$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";
这样你就可以修复丢失的图片
关于css - SCSS 在从不同文件夹导入时未正确传递相对图像引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54854427/