1

I have a cdn hosted .scss file that contains a sass variable that I need to access from my code. The hosted file basically looks like this:

http://hostedsite/styles.scss 

$styles: (
  $icons: (
    'heart': '\ea01',
    'star': '\ea02',
    'cloud': '\ea03'
  )
)

And in my project I'd love to be able to do something like this:

@import url("http://hostedsite/icon.scss");

@each $icon, $value in map-get($styles, 'icons') {
  .#{$icon} {
    &::before {
      content: $value;
    }
  }
}

Is it possible to do this? I keep getting errors that $styles is undefined. I'm using gulp-sass if that matters at all.

ivysaurus
  • 138
  • 1
  • 10

1 Answers1

1

Sass will not compile any files from a remote location

(Can I import an externally hosted file with sass?)

However you can use a loader (For Webpack: Webpack Sass Loader, Universal: Postcss import url) with an task runner of your choice that goes through the files and looks for imported url's.

felixhu
  • 41
  • 1
  • 9
  • What's confusing me is this section of Sass docs saying you can do it: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import – ivysaurus Feb 18 '19 at 15:27
  • From the documentation: 'but there are a few circumstances under which it will compile to a CSS @import rule'. Try importing a css file from your website. – felixhu Feb 19 '19 at 11:58