Skip to content

Node sass importer supporting custom alias for directories or specific files

License

Notifications You must be signed in to change notification settings

javierbrea/node-sass-alias-importer

Repository files navigation

Build status Coverage Status Quality Gate

Renovate Last commit Last release

NPM downloads License

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")
    },
  },
};

License

MIT, see LICENSE for details.