Node Sass Alias Importer

Node sass importer supporting custom alias for directories or specific files.

Install

npm i --save-dev node-sass-alias-importer

Usage

Define aliases for directories or specific files in sass imports as it is done in javascript using the babel-plugin-module-resolver package.

const sass = require("node-sass");
const aliasImporter = require("node-sass-alias-importer");

sass.render({
  file: "./src/components/foo/foo.scss",
  importer: [
    aliasImporter({
      themes: "./src/styles/themes",
      variables: "./src/styles/variables/index"
    })
  ]
});

Now you can use aliases for importing specific files, or as base paths in your import statements:

// file: src/components/foo/foo.scss

@import "themes/foo-theme/index";
// Resolved as "../../styles/themes/foo-theme/index"

@import "variables";
// Resolved as "../../styles/variables/index"

Options

aliasImporter(aliases [,options])

Arguments
- aliases - <Object> Object containing aliases as keys, relative or absolute paths as values.
- options - <Object>
  - root - <String> Base path for all defined aliases. Default process.cwd()

Examples

Usage with Rollup

const sassPlugin = require("rollup-plugin-sass");
const sass = require("node-sass");
const aliasImporter = require("node-sass-alias-importer");

module.exports = {
  input: "src/index.js",
  output: {
    file: "dist/index.js"
  },
  plugins: [
    sassPlugin({
      insert: true,
      runtime: sass,
      options: {
        importer: aliasImporter(
          {
            themes: "themes",
            variables: "variables/index"
          },
          {
            root: "./src/styles"
          }
        )
      }
    })
  ]
};

Usage with Webpack

const aliasImporter = require("node-sass-alias-importer");

module.exports = () => ({
  entry: ["./src/index.js"],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              importer: aliasImporter({
                variables: "./src/styles/variables/index"
              })
            }
          }
        ],
        include: path.resolve(__dirname, "src")
      }
    ]
  }
});

Alternatives

Webpack

If you are using Webpack and sass-loader, you can use the Webpack's resolve.alias option directly:

// webpack.config.js

module.exports = {
  //...
  resolve: {
    alias: {
      themes: path.resolve(__dirname, "src/styles/themes"),
      variables: path.resolve(__dirname, "src/styles/variables/index")
    },
  },
};