Can't @require a node_modules external CSS file inside stylus tag

[AlbertMarashi]

Describe the bug
Can't import a CSS file from node modules (none of my aliases work from webpack either)

<style lang="stylus" global>
@require "~overlayscrollbars/css/OverlayScrollbars.min.css"

.os-theme-dark>.os-scrollbar>.os-scrollbar-track
    background rgba(0,0,0,0.1)

.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle
    background rgba(0,0,0,0.25)
</style>

Logs

ERROR in ./app/includes/scrollbars.svelte
Module build failed (from ./node_modules/svelte-loader-hot/index.js):
Error: C:\Users\Albert\Desktop\repos\promatimessvlete\app\includes\scrollbars.svelte:2:10
   1| <style lang="stylus" global>
   2| @require "~overlayscrollbars/css/OverlayScrollbars.min.css"
---------------^
   3|
   4| .os-theme-dark>.os-scrollbar>.os-scrollbar-track
   5|     background rgba(0,0,0,0.1)

failed to locate @require file ~overlayscrollbars/css/OverlayScrollbars.min.css

    at Evaluator.visitImport (C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\stylus\lib\visitor\evaluator.js:914:21)
    at Evaluator.Visitor.visit (C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\stylus\lib\visitor\index.js:28:40)
    at Evaluator.visit (C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\stylus\lib\visitor\evaluator.js:160:18)
    at Evaluator.visitRoot (C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\stylus\lib\visitor\evaluator.js:707:27)
    at Evaluator.Visitor.visit (C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\stylus\lib\visitor\index.js:28:40)
    at Evaluator.visit (C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\stylus\lib\visitor\evaluator.js:160:18)
    at Evaluator.evaluate (C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\stylus\lib\visitor\evaluator.js:247:15)
    at Renderer.render (C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\stylus\lib\renderer.js:86:26)
    at C:\Users\Albert\Desktop\repos\promatimessvlete\node_modules\svelte-preprocess\dist\transformers\stylus.js:1:484
    at new Promise (<anonymous>)
 @ ./app/includes/header.svelte 44:0-47 494:24-34 1243:2-12
 @ ./app/pages/home.svelte
 @ ./app/router.js
 @ ./app/entry-client.js
 @ multi @/entry-client.js

To Reproduce
The preprocessing is working fine and as expected, but I am trying to fix the issue of resolving these files. It's pretty critical as I'd like to even @require a variables file across my application, but I can't do this without having to resort to relative URLs (webpack alias aren't working in stylus either)

I don't know what would work to inline a CSS file from node_modules into my stylus tags. I am using webpack.

I've tried things like:

let { stylus } = sveltePreprocess

preprocess = [ //embedded on server & client webpack config (under svelte-loader)
    stylus({
        preferPathResolver: 'webpack',
        paths: ['node_modules']
    })
]

Expected behavior
Inline @require'd CSS to the style tag

Information about your project:

• Your operating system: Windows

• svelte-preprocess version 3.7.4

• Using Webpack

Additional context
None

[AlbertMarashi]

I tried @importing the CSS file, but it unusually just printed the import, instead of inlining the CSS

The browser tries to import a non-existant URL

[AlbertMarashi]

Whereas on my vue project (which I am porting from to svelte) it works fine and as expected, and inline the imported CSS

[nick-lehmann]

@DominusVilicus Did you find a solution to your problem?

As far as I know importing from node_modules with the ~ prefix is something provided by the webpack stylus-loader (search for ~). Could it be that you're using webpack for your vue project and rollup for svelte?

Unfortunately, I encountered the same problem today with rollup and have not solution yet. Will let you know if I figured out how to do it...

[kaisermann]

The ~ alias, as stated above, is a stylus-loader thing. svelte-preprocess and webpack/rollup don't communicate with each other in the sense that we're unable to use its aliases. svelte-preprocess automatically adds your node_modules to stylus inclusion paths, so in theory, you could just use @import 'overlayscrollbars/css/OverlayScrollbars.min.css' (without the tilde). I've added a statement to the docs clarifying the automatic inclusion path behavior.

[nick-lehmann]

Thank you very much @kaisermann for the clarification 👍🏻

[AlbertMarashi]

Did something like this to add my own custom stylus paths @nick-lehmann

    preprocess: sveltePreprocess({
        sourceMap: true,
        stylus: {
            paths: [appDir] //allow absolute import from /app directory
        }
    }),