How to simplify the @import path for my npm sass package?

Question

Situation

I have developed a small sass package and published it on npm.

To use the package in a project I npm install it and then import the main file like so:

@import 'node_modules/my-package/my-package.scss';

This works.

Question

Is it possible to allow users to just import it like so?

@import 'my-package';
or
@import 'my-package.scss';

I think I saw some packages that allow this. Is this possible?

Any kind of help is much appreciated!

Answer 1

If you're using Dart Sass, you can pass --load-path=node_modules to your watch script and then in your main Sass file add @import "my-package";.

Example script in package.json:

"sass --load-path=node_modules --watch app/sass:app/dist --style compressed"

---

I've spent a lot of time trying to figure this out and installing modules I didn't need before stumbling across this solution.

Answer 2

With Gulp and gulp-sass, people can specify includePaths

.pipe(sass({
    includePaths: [
        './node_modules/your-package-name'
    ]
}))

This will tell the compiler to always look for includes by appending that path to import as it is compiling.

Then in their *.scss files they only need to do

@import "your-package-name";

or

@import "your-package-name/variables";

Otherwise, I don't think it's possible with similar setup - after all, it's just an URL, unless they do some pre-processing, they would need to specify the full path to it