style-resources: Unable to use Sass built-in modules

Dude I don’t have time to create a repo, and push it to GitHub to help you debug. I’m already working on a personal projet on a Sunday. I’m not here to become a collaborator on style-resources.

You wanna reproduce :

1. create-nuxt-app
2. install @nuxtjs/style-resources and sass
3. create multiple scss files
4. use hoistUseStatements: true
5. in all those files use sass:string, sass:map, etc. and create dummy functions (at least one @use per file)
6. run your Nuxt app
7. debug

Probably not the most ideal solution to this problem (smarter and more patient minds than I could jump in), but I managed to get this working by adding the following to my nuxt.config.js:

build: {
  extend(config, { loaders }){
    loaders.scss.additionalData = '@use "sass:math";'
  }
}

I could then use math.* functions inside any *.scss file loaded from styleResources. Adjust your loader as necessary…

I would be curious to know what the drawbacks to this method are, either in terms of testing/compilation time and/or app size, if any.

I cannot get this to work. Either I get SassError: @use rules must be written before any other rules. or when I use hoistUseStatements: true I get errors like SassError: Invalid Sass identifier "sass:math" because the @use-statements come out like @use '../../../assets/styles/config/sass:math';. I feel like I’ve tried everthing…

any solution to this would be great.

ERROR in ./components/Navigation.vue?vue&type=style&index=0&id=9fda8526&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./components/Navigation.vue?vue&type=style&index=0&id=9fda8526&lang=scss&scoped=true&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid Sass identifier "sass:math"
  ╷
2 │ @use '../assets/styles/sass:math';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

You have an issue and not me so sorry but i won’t spend time trying to reproduce it if you don’t even care enough to create a straightforward reproduction.

Even if there is an issue, it likely is in the sass-loader itself, to be fair.

I can confirm this issue and looking for a solutions 😦

Support for that was added in v1.1.0 through https://github.com/nuxt-community/style-resources-module/pull/162

Might be some case that is not handled by sass-resources-loader but what you could do is create a small SCSS wrapper file like app.scss with

@import 'constants';
@import 'functions';
@import 'mixins';

and import that instead.

It seems to be working with on file importing (w/ @import) all the other files I wanted to use w/ style-resources. In the imported files I can use @use rules.

Thanks @rchl!

Might be some case that is not handled by sass-resources-loader but what you could do is create a small SCSS wrapper file like app.scss with

@import 'constants';
@import 'functions';
@import 'mixins';

and import that instead.

If I exclude the file from being loaded by style resources module and import it manually from my global.scss file it seems to work ok.

@markhorgan how did you get this working? if i declare @use ‘sass:math’; in my ‘global.scss’ i get following error: SassError: @use rules must be written before any other rules.

Or did you just dropped styleResources completely in this scenario?