Sapper - (node-)SASS - prependData doesn't seem to work

[Nokorbis]

Describe the bug
When I use prependData for the sass preprocessor in a Sapper project, my sass variables are not recognized. If I import them myself if the <style> tag, it works.

Logs

internal/modules/cjs/loader.js:775
    throw err;
    ^

Error: Cannot find module 'F:\Dev\Envs\yeoman\test\__sapper__\dev\server\server.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)
    at Function.Module._load (internal/modules/cjs/loader.js:677:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:999:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []

To Reproduce
https://github.com/Nokorbis/sapper-preprocess-sass-issue

Expected behavior
My sass variables being prepended to my style tags

Stacktraces

Information about your project:

• Your browser and the version:
  /

• Your operating system:
  Windows 10

• svelte-preprocess version
  4.0.6
  https://github.com/Nokorbis/sapper-preprocess-sass-issue/blob/master/package.json

• Whether your project uses Webpack or Rollup
  Rollup

Additional context
I had a similar issue on Svelte, but which was caused by the path format (\ instead of /), here my path is correct :D
Node version: v12.10.0

[Nokorbis]

When I use @use in the prependData, it looks like both the client and the server crash
When I use @import in the prependData, it looks like only the sever crashes

[Nokorbis]

If I use "import" in the style tag,
it works :

If I use "use" (with or without namespace) it doesn't:

[Nokorbis]

Maybe "use" isn't working because,
If I read the doc,
it (use) cannot be used after other lines. Maybe it is concatenated and thus there are lines before the "use", which break the to-be-compiled file.

[Nokorbis]

I tried that "use" stuff on a svelte project, same result.
I wonder if I should create another issue, because I'm note sure those two are related

[Nokorbis]

To sum up :

• prependData doesn't seem to work on (sapper's) server side for SASS
• @use doesn't seem to work (wherever it is put - style tag or prependData - ) in svelte/sapper project

[Nokorbis]

I've cloned svelte-preprocess to add logging,
It looks like the preprendData is prepended twice :

[Nokorbis]

Well...
Even if I comment the prepend in scss,
I have an issue with "use"

[Nokorbis]

Okay, made it work (for the "use" stuff) by removing 'F:' at the start of the file.
Damn, Sass isn't friendly to Windows user :D

[Nokorbis]

Actually, I don't need to use "process.cwd()" at all because it is run from the project root folder

[Nokorbis]

Okay,
back to my sapper project,
With the log,
I see that prependData is undefined :

[Nokorbis]

Okay...
Seems to be linked to the sass library.
I was using node-sass,
I changed for sass, everything works.

¯_(ツ)_/¯

[Nokorbis]

(prependData was getting "undefined" because I used sass instead of scss as key of "autoPreprocess")

[kytta]

I spent hours trying to get my setup to work when all I needed to do was to change sass to scss in svelte.config.js... 🙄

Why isn't it mentioned anywhere that scss and sass aren't interchageable?

[kaisermann]

sass should be used when you intend to use the indented syntax (https://sass-lang.com/documentation/syntax#the-indented-syntax). I'll add it to the docs, but using either of them shouldn't change the behavior of prependData 🤔

[kytta]

@kaisermann hmm, that's weird, because for me it did all the difference 🤔 I am using the scss syntax and I am specifying it in the style tags (<style lang="scss">)

[kaisermann]

@NickKaramoff Just to see if I understood it correctly: you were using lang="scss" with a { sass: { ... } } config? If that's it, this is happening because sass is considered an alias for scss, but the opposite is not. I'll make this clearer in the docs

[kytta]

Just to see if I understood it correctly: you were using lang="scss" with a { sass: { ... } } config? If that's it, this is happening because sass is considered an alias for scss, but the opposite is not.

That's exactly what I was doing 😅

I'll make this clearer in the docs

Thank you 🙌