https://github.com/javierbrea/node-sass-alias-importer

Node sass importer supporting custom alias for directories or specific files
https://github.com/javierbrea/node-sass-alias-importer

alias aliases custom customization directories directory file files folder node-sass node-sass-importer path rollup sass webpack

Last synced: 2 days ago
JSON representation

Node sass importer supporting custom alias for directories or specific files

• Host: GitHub
• URL: https://github.com/javierbrea/node-sass-alias-importer
• Owner: javierbrea
• License: mit
• Created: 2019-06-18T15:31:19.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-25T21:46:39.000Z (5 months ago)
• Last Synced: 2024-09-26T01:37:26.316Z (7 days ago)
• Topics: alias, aliases, custom, customization, directories, directory, file, files, folder, node-sass, node-sass-importer, path, rollup, sass, webpack
• Language: JavaScript
• Homepage:
• Size: 498 KB
• Stars: 7
• Watchers: 2
• Forks: 4
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
[![Build status][build-image]][build-url] [![Coverage Status][coveralls-image]][coveralls-url] [![Quality Gate][quality-gate-image]][quality-gate-url]

[![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com) [![Last commit][last-commit-image]][last-commit-url] [![Last release][release-image]][release-url] 

[![NPM downloads][npm-downloads-image]][npm-downloads-url] [![License][license-image]][license-url]

# Node Sass Alias Importer

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

## Install

```bash

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](https://www.npmjs.com/package/babel-plugin-module-resolver).

```js

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 containing aliases as keys, relative or absolute paths as values.

	* options - _``_

		* root - _``_ Base path for all defined aliases. Default `process.cwd()`

## Examples

### Usage with Rollup

```js

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

```js

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](https://github.com/webpack-contrib/sass-loader), you can use the Webpack's `resolve.alias` option directly:

```js

// 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](./LICENSE) for details.

[coveralls-image]: https://coveralls.io/repos/github/javierbrea/node-sass-alias-importer/badge.svg

[coveralls-url]: https://coveralls.io/github/javierbrea/node-sass-alias-importer

[build-image]: https://github.com/javierbrea/node-sass-alias-importer/workflows/build/badge.svg?branch=master

[build-url]: https://github.com/javierbrea/node-sass-alias-importer/actions?query=workflow%3Abuild+branch%3Amaster

[last-commit-image]: https://img.shields.io/github/last-commit/javierbrea/node-sass-alias-importer.svg

[last-commit-url]: https://github.com/javierbrea/node-sass-alias-importer/commits

[license-image]: https://img.shields.io/npm/l/node-sass-alias-importer.svg

[license-url]: https://github.com/javierbrea/node-sass-alias-importer/blob/master/LICENSE

[npm-downloads-image]: https://img.shields.io/npm/dm/node-sass-alias-importer.svg

[npm-downloads-url]: https://www.npmjs.com/package/node-sass-alias-importer

[quality-gate-image]: https://sonarcloud.io/api/project_badges/measure?project=javierbrea_node-sass-alias-importer&metric=alert_status

[quality-gate-url]: https://sonarcloud.io/dashboard?id=javierbrea_node-sass-alias-importer

[release-image]: https://img.shields.io/github/release-date/javierbrea/node-sass-alias-importer.svg

[release-url]: https://github.com/javierbrea/node-sass-alias-importer/releases