groenroos's avatar

Importing from node_modules in Stylus with Laravel Mix

I have a large Stylus project I need to port into Laravel Mix from vanilla Gulp.

The app.styl includes another framework.styl which @imports stuff from node_modules. I can't use the use and import flags (or at least I can't figure out how to) in Laravel Mix, because

  1. For some dependencies, I only need to import specific files inside the node_modules folder, not the whole thing
  2. With one dependency, I need to set a long list of variables inside of Stylus before importing it.
main.styl
@import "includes/framework.styl"

/* Other stuff */
includes/framework.styl
$variable = 1.5
$other = white
/* loads more */

@import "jeet"
@import "foo/src/specific.styl"

ks-no-conflict = true
@import "kouto-swiss"

/* other stuff */

All of the @imports in framework.styl are from node_modules. The order in which these dependencies and files are loaded is important, as they can clash with one another if loaded in the wrong order.

However, when I run npm run dev, it complains it can't find any of the dependency locations inside framework.styl.

I've tried prefixing the @import paths with ~/, ./node_modules/, ../../../../node_modules, etc.; nothing seems to work.

How can I either make Stylus find these dependencies in node_modules (my preferred solution), or in the alternative, replicate the above in Laravel Mix options?

0 likes
3 replies
groenroos's avatar

Unfortunately, I still get the same error with that as with most other formats;

failed to locate @require file node_modules/jeet/styl/index.styl

With ../../../../node_modules, I get the following;

Module build failed: Error: EISDIR: illegal operation on a directory, read
    at Error (native)

Please or to participate in this conversation.