Expected Digit error when using sass dart variables

[ptomaszi]

I got the following error when trying to use variables syntax in my sass file:

@use "../variables" as v;

@mixin size() {
  &.small {
    font-size: var(--font-size-small);
    width: 45px;
    height: 45px;
    border: 3px solid v.color("primary");
  }

Error: Expected digit. src\components\avatar\avatar.module.scss 8:25 root stylesheet at Object.j2 (E:\git\Butterscotch\node_modules\rollup-plugin-sass\node_modules\sass\sass.dart.js:12389:32) at Object.np (E:\git\Butterscotch\node_modules\rollup-plugin-sass\node_modules\sass\sass.dart.js:12305:39) at D4.dart.D4.$2 (E:\git\Butterscotch\node_modules\rollup-plugin-sass\node_modules\sass\sass.dart.js:12406:21) at Ay.va (E:\git\Butterscotch\node_modules\rollup-plugin-sass\node_modules\sass\sass.dart.js:3977:42) at m7.uf (E:\git\Butterscotch\node_modules\rollup-plugin-sass\node_modules\sass\sass.dart.js:3095:46) at A2.$0 (E:\git\Butterscotch\node_modules\rollup-plugin-sass\node_modules\sass\sass.dart.js:3309:7) at Object.dr (E:\git\Butterscotch\node_modules\rollup-plugin-sass\node_modules\sass\sass.dart.js:3236:80) at a7.dart.a7.be (E:\git\Butterscotch\node_modules\rollup-plugin-sass\node_modules\sass\sass.dart.js:3162:3)

[SASUKE40]

Could you give me any code for reproducing?

[WoodrowShigeru]

Code for reproducing:

main.scss:

@import "header";

_header.scss:

@use 'config';

body > header {
	color: config.$config-color;
}

_config.scss:

$config-color: green !default;

Results in:

$ sass --watch -s compressed main.scss style.min.css
Error: Expected digit.
	color: config.$config-color;
	              ^
  _header.scss 9:16  root stylesheet
  main.scss 12:9     root stylesheet

[geotrev]

I think this could be resolved by enabling a custom sass processor right? Such as dart-sass, which has all the newest features. I think it's also technically the main sass package for npm now.

[WoodrowShigeru]

I am compiling with dart-sass 1.15.2

[rootwork]

In case anyone else runs into this: I got this when importing a variables file that had some CSS-specific characters in it. In my case it was a URL (the colon, slash, and dot are all CSS operators). So if you encounter this I'd suggest taking a look at what you're importing in case there are some unexpected characters in there.