How do I @import CSS content from node_modules in my stylesheet?

[zgoda]

I have some CSS styles installed in node_modules but I seem not able to reference it in my global public/style.css stylesheet, in terminal I'm getting 404 ./public/node_modules/somepackage/some.css - File not found while in dev. I think the existing issues with to CSS processing are not related because this is really an attempt to access a resource outside public/ tree.

public/style.css content:

@import "../node_modules/somepackage/some.css";

Is this possible at all or should I vendor this CSS with my code?

[marvinhagemeister]

No need to manually traverse to node_modules. One can rely on the npm package specifier instead:

@import "somepackage/some.css";

[zgoda]

Is this supposed to work out of the box? Because I'm still getting 404, this time 404 ./public/somepackage/some.css - File not found.

[marvinhagemeister]

Yes, this works out of the box for me on my end. Can you share the name of the package with which the error occurs? I'd love to take a look at that to see if something isn't working on our end 👍

[zgoda]

It's mvp.css. The code is basically starter from CLI with this one import at the top in global style.css.

[marvinhagemeister]

Awesome, thanks for sharing. I can reproduce the issue on my end now. As a workaround you can import the css inside javascript.

import "mvp.css/mvp.css"

// ...my code here

[zgoda]

Same issue with pure.css so I guess it's not specific to mvp.css.

[Newbie012]

@marvinhagemeister I can confirm it still happens on version 3.7.2 when importing bootstrap (3.3.7) as follows:

@import "bootstrap/dist/css/bootstrap.css";

It treats this path as a relative path. If I change it to:

@import "/@npm/bootstrap/dist/css/bootstrap.css"

then it seems to work. But I guess it's not intended to be used this way?