Unable to use Sass built-in modules

[markhorgan]

I'm using dart-sass node module but stylesheets loaded with the style resources module aren't able to load Sass built-in modules

E.g.

abstractions/units.scss:

@use "sass:math";

nuxt.config.js:

styleResources: {
  scss: [
    '~/assets/scss/abstractions/*.scss',
    ]
  },

  css: [
    '~/assets/scss/global.scss'
  ],

Results in the error:

SassError: Invalid Sass identifier "sass:math"
@use "abstractions/sass:math";

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.

[leevihuhtamaa]

I can confirm this issue and looking for a solutions :(

[leevihuhtamaa]

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?

[dcrabbeYapily]

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';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

[ehainer]

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.

[andrey-hohlov]

https://github.com/shakacode/sass-resources-loader has hoistUseStatements options to handle this case

[rchl]

👍

[rchl]

Support for that was added in v1.1.0 through #162

[botteu]

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...

[rchl]

Create a reproduction repo and someone will probably be able to help you.

[leevihuhtamaa]

Support for that was added in v1.1.0 through #162

Thanks @rchl ! Works like a charm

[riddla]

@rchl, @botteu: I could re-create it in https://codesandbox.io/s/nuxtjsstyle-resources-hoistusestatements-forked-p4ct3?file=/nuxt.config.js:78-107.

[rchl]

@riddla try removing yarn.lock and node_modules and re-run yarn.

[provok-me]

@riddla try removing yarn.lock and node_modules and re-run yarn.

Having the same problem. Removing yarn.lock and node_modules didn't resolve the issue.

[provok-me]

@riddla did you found a hack for this?

[provok-me]

@rchl Having only one file using @useand @forwardstatements seems to work.

The problem comes when I import multiple files that use @use or @forward. Even when using hoistUseStatements: true.

[rchl]

Please create reproduction

[provok-me]

I'm not able to create a reproduction. Codesandbox is shit.

With the Nuxt's codesandbox template I'm not even able to use lang="scss" in a component... "sass-loader not found in /sandbox" even after installing it 😂

I don't have time to battle with a fake environment.

What I can tell you is that I use:

• "@nuxtjs/style-resources": "^1.2.0",
• "nuxt": "^2.15.0"
• "sass": "^1.35.2",

[rchl]

You can create a repo locally and push it to GitHub

[provok-me]

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

[rchl]

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.

[riddla]

@rchl What about the two reproductions on CodeSandbox that I posted above?
(Removing yarn.lock and node_modules did also not do the trick for me locally.)

[rchl]

@rchl What about the two reproductions on CodeSandbox that I posted above?
(Removing yarn.lock and node_modules did also not do the trick for me locally.)

It did help here when I've tried it

[provok-me]

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.

Here I created a repo @rchl.
https://github.com/Alphability/multiple-use-statements

Same problem.

It seems to come from using style-resources and Nuxt css property with scss files using @use statements.

[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.

[provok-me]

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!

[mahish]

Temporary fix shakacode/sass-resources-loader#148

[rchl]

Using single quotes instead of double quotes doesn't fix the reproduction above. At least not fully, so there is likely another issue in the loader.

Feel free to report an issue there if it's important for you.

[tophermurphy]

Still having this issue.

[Asef00]

In my case fixed by:

• Using hoistUseStatements: true
• Wrapping all resources(variables & mixins) into a single SCSS file with @use 'sass:math'; in the first line.