Property: injectGlobalPaths doesn't take into account @use rules

[lennu]

Lets say I have the following setup:

{
  injectGlobalPaths: ['./mixins.scss']
}

### mixins.scss
@mixin whatever {
  margin: 0;
}

### styles.scss
use "sass:math";

div {
  width: math.div(100, 2);
}

This will end up with error: @use rules must be written before any other rules.
https://sass-lang.com/documentation/at-rules/use

The code which adds the import statements, should analyze the file and add import clauses under @use statements instead of just adding them to beginning of the each file.

stencil-sass/src/util.ts

Line 55 in 7871073

return `@import "${injectGlobalPath}"${importTerminator}`;

[andrejpavlovic]

As a workaround I removed the use of injectGlobalPaths and now import global scss files (such as mixins.scss) directly inside of component styles (such as styles.scss).

[A143447]

Our workaround was to create a workaround-scss file that performs the calculations, assigning them to variables and importing that file in the mixins.scss. It's a bit of a hack, we only had seven instances where that calculation was needed (as opposed to many more .scss files)

[r3dDoX]

Just ran in the same issue. Since we have quite a big project these workarounds are not a good option for us. Is anyone working on this?

[nickjwilde]

We had this same issue as well. Looking into @lennu reference to

stencil-sass/src/util.ts

Line 55 in 7871073

return `@import "${injectGlobalPath}"${importTerminator}`;

Switching that line to

return `@use "${injectGlobalPath}"${importTerminator}`;

Worked for me. However, this makes injected global paths use a namespace, so

'src/global/colors.scss'

Ends up with a colors namespace as per docs https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace

Using

return `@use "${injectGlobalPath}" as *${importTerminator}`;

Removes the namespace if that's needed to make updating easier/more seamless.

I'd be happy to help with this issue.

Edits: formatting