Search code examples
webpacksasscompass-sass

SASS Variable in `url()`

I have a variable which is a string to a image path:

$loader-path: "assets/loader.png";

I'm trying to use this variable as a background, however, I keep receiving an error:

Module not found: Error: Can't resolve "assets/loader.png"

This is what my SASS looks like:

$loader-icon: "assets/loading.png";

.inputLoader{
  background-image: url($loader-icon); // also tried url(#{$loader-icon})
  width: 24px;
  height: 24px;
  margin-left: -96px;
}

I have also tried the below, which is what Compass pointed out:

background-image: image-url($loader-icon);

The above just prints image-url(assets/loading.png)

Solution

  • You need to add / in the path variable in order to make it absolute.
    That error says that compass cannot find the resource you are linking to.

    So, your variable would look like:

    $loader-icon: "/assets/loading.png";