css - How can I assign a library's sass variable without it having a !default value - Stack Overflow

admin管理员组

文章数量:1122826

We have to use a library with some css that looks like this. Until now we imported it with @import, but we'd like to update to @use.

.esri-view {
  ...
  font-family: $font-family;

The $font-family variable doesn't have a default value. Because of this, our @use doesn't work:

@use '@arcgis/core/assets/esri/themes/base/_View.scss' with (
  $font-family: var(--our-internal-font-family)
);

The error:

✘ [ERROR] Undefined variable. font-family: $font-family;

This would be easily fixable with a $font-family: somefont !default; in the library's code (as per the sass docs) but as the css is loaded from npm we can't/don't want to change it. Are there any feasible workarounds for this?

Context: We use this in an Angular 18 setup.

We have to use a library with some css that looks like this. Until now we imported it with @import, but we'd like to update to @use.

.esri-view {
  ...
  font-family: $font-family;

The $font-family variable doesn't have a default value. Because of this, our @use doesn't work:

@use '@arcgis/core/assets/esri/themes/base/_View.scss' with (
  $font-family: var(--our-internal-font-family)
);

The error:

✘ [ERROR] Undefined variable. font-family: $font-family;

This would be easily fixable with a $font-family: somefont !default; in the library's code (as per the sass docs) but as the css is loaded from npm we can't/don't want to change it. Are there any feasible workarounds for this?

Context: We use this in an Angular 18 setup.

• css
• sass
• arcgis-js-api

Share Improve this question Follow asked Nov 22, 2024 at 9:26 sandroocosandrooco 8,7151111 gold badges5555 silver badges9797 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can create a custom wrapper Sass file that defines the $font-family variable before importing the library. For example:

// _custom-view.scss
$font-family: var(--our-internal-font-family);

@use '@arcgis/core/assets/esri/themes/base/_View.scss' with (
   $font-family: $font-family
);

Then, import your custom wrapper file in your project:

@use './path/to/_custom-view';

This method works by ensuring the variable is already defined when the library's styles are loaded.

本文标签： cssHow can I assign a library39s sass variable without it having a default valueStack Overflow