@next make sass loader include node_modules

[hyperknot]

With the next branch, I'm using the built-in sass loader, works perfectly.
However

1. How can I configure it to include node_modules in the include path?
2. Why is this not the default configuration? It's the most typical use case, CSS/SCSS libs are always distributed via npm these days.

[hyperknot]

Putting ~ in front of module names makes it resolve to node_modules.

[gaearon]

@Timer wanna get this into 2?

[Timer]

I need to understand the proposed PR more, sass-loader makes it very clear you shouldn't use includePaths like #5011.

[Timer]

Can you show us a specific case that doesn't work for you, but you'd like to?

[Timer]

Oh, I think this is a request for absolute imports.

[hyperknot]

Yes, exactly absolute imports. To make sure that we can bundle code from CSS frameworks, like:

@import "semantic-ui-css/semantic.css";
@import "perfect-scrollbar/css/perfect-scrollbar";
@import "primer-forms/index";

Exactly how you can via the command line node-sass CLI.

[hyperknot]

Also, you should read sass/node-sass#2362. It is the most widely commented and community opposed change in the history of SASS.

Originally node-sass wanted to remove CSS import, but it's so important and so widely used in projects, that they finally changed their mind and it'll stay in 5.0.

So 4.8 had it 4.10 will have it and 5.x will have it, but early versions of 4.9 displayed a warning about it.

[Timer]

Hmm, given that ~ is already supported, why isn't that a good option?

@import "~semantic-ui-css/semantic.css";
@import "~perfect-scrollbar/css/perfect-scrollbar";
@import "~primer-forms/index";

~ is explicit: resolve this like a module. This is how all of our existing .css files behave, too. It isn't preventing you from importing css.

AFAIK a CSS import like file/b.css actually resolves like ./file/b.css (and this is how browsers work), so I think this behavior would be confusing if on by default.

This is the same reason we never added src as a resolve alias to webpack, but are now considering adding it under @ or something -- just not naked.

[Timer]

Yeah, this would be very bad. See bootstrap for example. What happens when one of those names are installed as a package? 💥

[hyperknot]

I believe ~ is a perfect solution, I have no problem with that. I just wanted to make sure that:

• ~ stays supported in the final version
• it's documented somewhere, at least in this issue