Can you import sass variables from an externally hosted (cdn) sass file and use it in your project?

Question

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.

felixhu felixhu · Accepted Answer · 2019-02-18T10:26:39

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.

Can you import sass variables from an externally hosted (cdn) sass file and use it in your project?

1 Answers