Home Articles

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

Asked
Viewed 1605 times
2

src images / 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)进行捆绑 .

1 Answer

  • 1

    edit 这个答案还应该考虑使用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
    

Related