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.
https://github.com/ionic-team/stencil-sass/blob/7871073e3a882af4bf9a8fc7bf4faf6092828ee4/src/util.ts#L55

[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 https://github.com/ionic-team/stencil-sass/blob/7871073e3a882af4bf9a8fc7bf4faf6092828ee4/src/util.ts#L55

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

[mm-georges]

@christian-bromann I can contribute with a fix for that. I would go with the same approach as @nickjwilde mentioned by changing the line to return "@use "${injectGlobalPath}" as *${importTerminator}";