how to use sass variables from a CDN - css

Question

I've a project that uses create-react-app and a remotely hosted colors.scss file that only has the definition of colors inside (content below).
$color-blue: #2281ff;
$color-cyan: #11a0f2;
$color-lue-light: #cfd7fc;
Next I've an index.scss that looks the following way:
#import url('http://url.domain/colors.scss');
body: {
background-color: $color-blue;
}
When the app is being build I get the following error
SassError: Undefined variable: "$color-blue".
on line 4 of src/index.scss
>> background-color: $color-blue;
this is when using node-sass
Next I've tried changing node-sass to dart-sass which is just sass so ran npm uninstall node-sass and then npm install sass
my file looked like this
#use url('http://url.domain/colors.scss');
body: {
background-color: $color-blue;
}
this yielded an error
SassError: Expected string.
╷
1 │ #use url('http://url.domain/color.scss');
rewriting the import to
#use "http://url.domain/color.scss";
yielded
SassError: Can't find stylesheet to import.
╷
1 │ #use "http://url.domain/color.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
is it not possible to use variables from a remote source? Or am I missing something?
NOTE: http://url.domain/color.scss is an abstracted version of the link, when the real one is pasted into the browser I can see the correct stylesheet with variables loaded.

Answer 1

Yes, you cannot use the variables defined in the remote SCSS file. We ran into a similar issue. So, we downloaded the remote scss file as part of the build process and referenced the downloaded file as a local file.