getting "@use rules must be written before any other rules" error even though config has hoistUseStatements

[patrick99e99]

I have an icons.scss file which has in it:

@use '~fancy_icons/dist/index' as i;
$icons: i.$icons;
...

And my config has:

loaders.push({
  loader: 'sass-resources-loader',
  options: {
    hoistUseStatements: true,
    resources: [
      'app/javascript/stylesheets/icons.scss',
    ]
  }
});

Yet I still get:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: @use rules must be written before any other rules.
    ╷
402 │ @use '~fancy_icons/dist/index' as i;
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

[AmirMasoud-Beheshti]

No fix yet? I have the exact same issue

[justin808]

I'm open to a PR!

[mrleblanc101]

Still an issue. The node-sass vs dart-sass really took a toll on sass :/

[mrleblanc101]

I have @use "sass:math"; in 2 files. One is settings/_svg-uri.scss and one is settings/_functions.scss Here is my config.

options: {
    hoistUseStatements: true,
    resources: ['@/assets/scss/settings/*'],
}

This would expand to this:

But I get this error:

Module build failed. SassError: @use rules must be written before any other rules.

I shouldn't get any error because of the hosting, but I still get one.

I have a weird workaround, I remove the hosting (which make no sense) and manually move one of my file with @use "sass:math"; as the first element before the import glob (had the move it to another folder).

options: {
    resources: ['@/assets/scss/functions/svg-uri', '@/assets/scss/settings/*'],
}

I don't understand why there is no error now because there is at leant one @use "sass:math"; which is not at the begging because other file are loaded in between.

[justin808]

I'm still open for code and doc PRs!

[mrleblanc101]

I don't know what the problem is and I can't say I understand how this plugin work, sorry.

[mrleblanc101]

Ok, I'm dumb. It still doesn't work. My import was incorrect '@/assets/scss/functions/svg-uri' instead of '@/assets/scss/functions/_svg-uri.scss' and it failed silently. But I think I understand what the problem is. I have a @use "sass:math"; in 2 files. I should only have it in the file that is imported first. 1) Shouldn't this library deduplicate the @use statement ? 2) Shouldn't the webpack build fail it a file cannot be found ? See my exemple above.

[nikkifurls]

I'm experiencing this as well with @use 'sass:math'. Is there any update here? Does hoistUseStatements not work correctly or are we doing something wrong?

[tannerhuynh]

Bump still having this issue. Any progress?

[justin808]

I'm open to reviewing a PR.

Another option is that you can hire ShakaCode to address this issue, and we can help you with many other issues.

See shakacode.com and especially https://www.shakacode.com/blog/client-engagement-model/.

If you're interested, please book a time with me.