Sass图片网址引用错误，链接导入

Question

  

  
• SRC      
    
  • 图像/ image1.jpg
    
  • sass / sass1.scss（background-image：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）进行捆绑。

Answer 1

编辑此答案还应考虑使用src / image1的webpack或图像在捆绑之前的任何位置。 您需要确保图像的最终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并置于公共状态，那么公用文件夹现在看起来像

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