Sass 图片 url 引用错误，链式导入

Posted 2023-02-22

【中文标题】Sass 图片 url 引用错误，链式导入

【英文标题】：Sass image url reference error, chained imports

【发布时间】：2017-08-24 05:20:55

【问题描述】：

源 images/image1.jpg sass/sass1.scss (背景图片: url('../images/image1.jpg')) folder1/folder2/sass2.scss (@import '../../sass/sass1')

这是我的文件夹结构。当我尝试将 sass1 导入 sass2 时，图像的路径未解析，因为 sass 加载器希望图像路径与最终文件相关，即在我们的示例中为 sass2。

sass 加载器搜索图像的路径是 - 'folder1/images/image1.jpg' 而不是 'src/images/image1.jpg'。

我正在使用 webpack(v1) 进行捆绑。

【问题讨论】：

图像应该放在公用文件夹中的“资产”文件夹中......又名“公共/资产”。这意味着如果您的样式被编译，URL 将相对于 URL 路径而不是项目文件夹。

您还需要提供捆绑的文件夹路径。

图片加载到公用文件夹中。但是 sass 加载程序无法解决问题所在的路径。

doesnt 'sass/sass1.scss (background-image: url('images/image1.jpg'))' 成功吗？

sass/sass1.scss 确实做到了。但是当我尝试将 sass1 导入 sass2 时，sass2 会相对于它自己的路径搜索图像。

【参考方案1】：

edit 这个答案也应该考虑到 webpack 使用 src/image1 或任何图像在包之前的位置。 您需要确保图像的最终 css 路径相对于服务器上的 css 文件路径。 （见下文最后一节）

给定文件夹目录

src/
  sass/
    sass1.scss
    sass2.scss
public/
  images/
    image1.png

scss2

@import "scss1"

scss1

.class 
  background: url("./images/image1.png")
 

如果将输出的 scss1.css 编译成 css 并放在 public，那么 public 文件夹现在看起来像

src/
  sass/
    sass1.scss
    sass2.scss
public/
  images/
    image1.png
index.html
scss1.css 

【讨论】：

赞成，因为它通常会起作用，但我的情况有所不同。采用了新的方法。 @DenisTsoi 感谢您的帮助。