Search code examples
importsassastrojs

Import image in scss / Astro

Using Astro and Sass I would like to use an asset image in a scss file.

In the scss file I have:

.map {
    background-image: url('src/assets/map.jpg');
    background-repeat:no-repeat;
    background-position: center center;
}

In the index.astro I import it as

---
import 'src/styles/global.scss';

---

When I use the astro dev I shows the image just fine but when I build it the image isn't compiled into the final dist.

Is there a way to import the image into the scss? Is this possible at all to import the image or do I just have to put it in the public folder and point to that path in the scss?

Solution

  • 1.Place the images in the public folder, then directly reference their paths in the SCSS file.

    2.If webpack is used, use URL Loader to handle image files.