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

【问题标题】：Sass image url reference error, chained importsSass 图片 url 引用错误，链式导入
【发布时间】：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) 进行捆绑。

【问题讨论】：

【解决方案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

【讨论】：