[Vuejs]-Using @use 'sass:color' is making variables imported via additionalData unavailable in my Vue.js / Vite app

by

1👍

✅

The Scss code defined in additionalData gets prepended to the <style> tag of the component. So what the Sass compiler ends up processing is:

@use "./src/style/vars.scss" as *;
@import '../style/sample.scss';

When sample.scss does not include any @use statements, as per the documentation:

When Sass imports a file, that file is evaluated as though its contents appeared directly in place of the @import. Any mixins, functions, and variables from the imported file are made available, and all its CSS is included at the exact point where the @import was written.

That means that the above is evaluated similarly to:

@use "./src/style/vars.scss" as *;
.sample-style {
  color: $sample-var;
}

However, as per the documentation on importing a module-system file (emphasis mine):

When you import a file that contains @use rules, the importing file has access to all members (even private members) defined directly in that file, but not any members from modules that file has loaded.

$sample-var is a member from a module, and thus sample.scss does not have access to $sample-var.

👤Wongjn

Leave a comment