@wessberg/sass-extended-import-resolve

A Custom Sass Import Resolver with included support for Node Module Resolution and additional file extensions

Description

This is an implementation of the Sass Import Resolve algorithm, with added support for Node Module Resolution.

At the moment, without this Custom importer, Sass library creators and consumers can:

• Ship .scss, .sass, or .css files via node_modules, and let consumers depend on files directly, - but not support hoisted dependencies/monorepos.
• Use Eyeglass

This implementation follows the convention of existing tooling and similar solutions that paths with a leading ~ will be resolved via Node Module Resolution.

Install

NPM

$ npm install @wessberg/sass-extended-import-resolve

Yarn

$ yarn add @wessberg/sass-extended-import-resolve

Usage

By default, you can simply use this library to resolve .scss, .sass, and .css files in exactly the same way as Sass currently does it:

import {resolve} from "@wessberg/sass-extended-import-resolve";

// Resolve "./a" from "/some/folder".
resolve("./a", {cwd: "/some/folder"});

This would be equivalent to a .scss file with a @import "./a" statement within the folder /some/folder.

Resolving files within Node Modules

Prefix the path with a ~ to indicate to the resolve algorithm that you'll be loading the library Node Modules:

resolve("~my-library");

The resolve function will use Node Module Resolution to find the library, and then look at the main property within the related package.json file. If it points to a file, for example index.js, for which there is an identically named file with an extension of .scss, .sass , or .css, or if the main property directly points to a file with a supported extension, that file will be resolved.

Adjusting supported extensions

You can alter what kind of extensions that can be resolved by providing an Iterable list of strings as an options argument to resolve:

resolve("foo/bar", {
  extensions: [".myextname", ".awesome", ".foobarbaz"]
});

Using it with node-sass

node-sass is a library that provides bindings to LibSass, the C version of the popular stylesheet preprocessor, Sass. With it, you can provide this library as a custom resolver for import paths:

import {resolve} from "@wessberg/sass-extended-import-resolve";
import sass from "node-sass";
import {dirname} from "path";

sass.render({
  file: "/path/to/my-file.scss",
  importer: function(id, parentId) {
    const resolved = resolve(id, {cwd: dirname(parentId)});
    return resolved != null ? {file: resolved} : null;
  }
});

Contributing

Do you want to contribute? Awesome! Please follow these recommendations.

Maintainers

• Frederik Wessberg: Maintainer

Backers 🏅

Become a backer and get your name, logo, and link to your site listed here.

License 📄

MIT © Frederik Wessberg