@next make sass loader include node_modules

Created by: 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.

Created by: hyperknot

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

Created by: gaearon

@Timer wanna get this into 2?

Created by: Timer

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

Created by: Timer

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

Created by: Timer

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

Created by: 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.

Created by: hyperknot

Also, you should read https://github.com/sass/node-sass/issues/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.

Created by: 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.

Created by: Timer

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

Created by: 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