Using index stylesheets in scss with the new @use and @forward rules is broken

[bdlowery]

I am using dart-sass, and i'm on version 3.21 Build 34472. @use and @forward are not working with mixins and variables.

This is my folder structure:

styles/
├─ settings/
│  ├─ _colors.scss
│  ├─ _index.scss
│  ├─ _typography.scss
site.scss

I have my color variables in _colors.scss, like $coooler: #ffffff. in typography I have mixins like:

@mixin calm-voice() {
	font-family: sans-serif;
	font-size: 1rem;
	line-height: 1.4;
}

then in _index.scss I have

@forward 'colors';
@forward 'typography';

From my understanding, this is the correct way to setup index files in sass.

Then I try and use this mixin and variable in site.scss like so:

@use 'settings' as *;

body {
	color: $coooler;
	@include calm-voice;
}

Codekit throws out this error, which makes no sense because the variable is defined -

Dart Sass failed with this error: Undefined variable.
   ╷
49 │     color: $coooler;
   │            ^^^^^^^^
   ╵
  site.scss 49:9  root stylesheet

Has anyone gotten the @use and @forward rules to work in codekit with index scss files?

[bdkjones]

You sure you meant to have three "o"'s in the word "cooler"?

CodeKit just runs Dart Sass. It does not change the way Dart Sass resolves imported files. If you run Dart Sass yourself from the command line, you should get the same result.

[bdlowery]

So with vite I'm able to do this:

@use 'settings' as *;

body {
    color: $coooler;
    @include calm-voice;
}

but with codekit I need to do this

@use 'settings/' as *;

body {
    color: $coooler;
    @include calm-voice;
}

(notice the slash at the end of settings/)

Everything i've seen with sass modules, and the @use and @forward rule shows that you don't need to do anything with the filepath other than just stating the folder name, no extra slashes or anything. It works that way in Vite... but not codekit?

Could it be codekits dependency tree doing anything?

[bdkjones]

I'm not familiar with Vite. But again: CodeKit just invokes Dart Sass. It has nothing to do with resolving @use or @forward statements.

The explanations I can think of off the top of my head include:

1. a different version of Dart Sass between the two cases.

2. a different current working directory when Dart Sass is invoked. CodeKit sets the CWD to the folder containing the Sass file that is being compiled.

3. CodeKit uses the --load-path sass option to suggest that Sass check every possible location for a "node_modules" folder. It does this by taking every folder from the one containing the Sass file being compiled to the disk root /, adding node_modules and passing each of those folders as a load-path. Maybe that makes a difference, but I don't see how.

Again: the thing that is throwing that error is NOT CodeKit. CodeKit is just telling you what Dart Sass spat out.