Support for tilde character to import from node_modules

Proposal

Add support for tilde character to import a module from node_modules. Current workaround of 'includePath` makes the build inefficient when we have

e.g. in my styles.scss I can do the following @import '~bootstrap-sass/assets/stylesheets/bootstrap/alerts'; instead of @import 'bootstrap-sass/assets/stylesheets/bootstrap/alerts'; and somewhere incudePaths: ['./node_modules'']

My guess is that this inefficiency increases when we have many npm modules as dependencies since the search operation has to search inside the entire node_modules. Trying to improve some efficiency to narrow includePaths is very fragile because the libraries we import may import other libraries and can’t be really done without trial and error or having a full knowledge of all the artifacts and their nested imports which defeats the purpose of having libraries in the first place.

Side note: Some build systems have added this feature e.g. https://github.com/webpack-contrib/sass-loader. However those who do not use webpack are at loss.

[yogeshgadge]

I think there is merit to extending sass vocabulary.

Providing includePaths vs tilde mean different things. It is module vs directories.

IncludePaths means anything in the directory at any level deep. Here comes you performance concerns:- if you have an import that does not exist in any where in the includePaths you end up visiting the entire tree for each of the values/directories of includePaths.

~ means a module.

For node its is under node_modules.

For other platform it could mean whatever a "module or a “library” means.

If that platform does not have a concept of module they simply won’t use it.

We need to find better ways to distribute and reuse SASS. Accepting a concept of module is a first step. And ~ character achieves that but you could choose a different character.

On Fri, Apr 13, 2018, 9:36 AM Serj Lavrin [e-mail] wrote:

You can also just write your imports like ekzo/objects/breadcrumb and use the includePaths option to ensure that your node_modules directory is on the include path.

As a side note, I’d probably recommend using ‘node_modules/ekzo/objects/breadcrumb’ path instead of includePaths option, since it makes clearer where that dependency coming from. Though, it’s just imho.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/sass/sass/issues/2350#issuecomment-381137346, or mute the thread https://github.com/notifications/unsubscribe-auth/ACT7OJEvsCIkW1UxaJHaZ5FKuvStaov5ks5toKnZgaJpZM4OfhBp .

[ArmorDarks]

Well, I have some concerns regarding ~ character. It doesn’t sound like a convention, besides some people might be confused by such close attaching to Node environment. For example, there is a Ruby, where people will also need to import from gems, and here ~ semantic really becomes obscure.

And it seems to me that package management is something, that should be handled not by Sass, since Sass just a compiler, nothing more.

Btw, for most cases it just enough to import directly from node_modules and do not use incudePaths:

@import 'node_modules/ekzo/objects/breadcrumb';

As a benefit, it makes clear where exactly that stylesheet coming from.

It will work for most cases, unless import has its own dependencies, but issue with dependencies is far beyond scope of this issue.