# sass-variable-loader

> Sass variable loader module for webpack

Latest version **0.1.2** (published 2017-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install sass-variable-loader
pnpm add sass-variable-loader
yarn add sass-variable-loader
bun add sass-variable-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2017-04-12 |
| First published | 2016-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 98 |
| Author | Gustaf Zetterlund |
| Maintainers | bstream, gu5taf, johnphoto, robineng |
| Keywords | nordnet, sass, variable, loader |

## Links

- npm: https://www.npmjs.com/package/sass-variable-loader
- Repository: https://github.com/nordnet/sass-variable-loader
- Homepage: https://github.com/nordnet/sass-variable-loader/#readme
- Issues: https://github.com/nordnet/sass-variable-loader/issues
- npm.io page: https://npm.io/package/sass-variable-loader

## Dependencies (4)

- [node-sass](https://npm.io/package/node-sass.md) ^4.5.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.0.3
- [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.1.1
- [strip-json-comments](https://npm.io/package/strip-json-comments.md) ^2.0.1

## Recent versions

- 0.1.2 (latest) — 2017-04-12
- 0.1.1 — 2017-02-23
- 0.1.0 — 2017-02-21
- 0.0.4 — 2016-07-25
- 0.0.3 — 2016-01-12
- 0.0.2 — 2016-01-12
- 0.0.1 — 2016-01-12

## README

# Sass variable loader for webpack

> Parses your Sass variables and returns an object containing each variable camelCased and the end value as it would be in CSS.
>
> That means full support for Sass' lighten, darken, mix etc.

**Input:**
``` scss
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
```

**Result:**
``` javascript
{
  grayBase: '#000',
  grayDarker: '#222222',
  grayDark: '#333333',
  gray: '#555555',
  grayLight: '#777777',
  grayLighter: '#eeeeee'
}
```

## Installation

`npm install --save-dev sass-variable-loader`

## Usage

``` javascript
import variables from 'sass-variable-loader!./_variables.scss';
// => returns all the variables in _variables.scss as an object with each variable name camelCased
```
**Note:** If you've already defined loaders for Sass files in the configuration, you can override the [loader order](https://webpack.github.io/docs/loaders.html#loader-order) by writing `!!sass-variable-loader!./_variables.scss` to disable all loaders specified in the configuration for that module request.

## Options

You can pass options to the loader via [query parameters](http://webpack.github.io/docs/using-loaders.html#query-parameters).

### preserveVariableNames

``` javascript
import variables from 'sass-variable-loader?preserveVariableNames!./_variables.scss';
// => returns all the variables in _variables.scss as an object with each variable name left intact
```

## License

MIT (http://www.opensource.org/licenses/mit-license.php)

---
_Source: https://npm.io/package/sass-variable-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._