# sass-json-loader

> jsonToSass loader module for webpack

Latest version **1.0.1** (published 2018-03-30) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-03-30 |
| First published | 2018-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 3.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Quangdao Nguyen |
| Maintainers | quangdao |

## Links

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

## Dependencies (1)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0

## Recent versions

- 1.0.1 (latest) — 2018-03-30
- 1.0.0 — 2018-03-30

## README

Fork of [Edward Irby's](https://www.npmjs.com/~edwardirby) [jsontosass-loader](https://www.npmjs.com/package/jsontosass-loader)
-------------------------------------------------------------------------------------------------------------------------------

# JSON to Sass loader for Webpack

This loader converts your JSON or module.export'ed JS variables into SCSS variables.

### Installation

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

## Usage

Add this to loader after `sass-loader` in your Webpack configuration file:

``` javascript
var sassVars = 'path/to/your/vars.json';

module.exports = {
    /* ... */
    {
        test: /\.scss$/,
        loader: extractMain.extract({
            fallback: 'vue-style-loader',
            use: [
                'css-loader',
                'sass-loader',
                {
                    loader: 'sass-json-loader',
                    options: { path: sassVars }
                }
            ]
        })
    },
    /* ... */
}
```

**Input [YourVars.json file]**
``` json
{
"breakpoints":{
    "portraitS": "320px",
    "portraitM": "360px",
    "portraitL": "414px",
  },
  "localNavHeight":"50px",
}
```

OR

**[YourVars.js file]**
``` javascript
{
module.exports = {
	breakpoints: {
		portraitS: '320px',
		portraitM: '360px',
		portraitL: '414px'
	},
	deepObject: {
		a: {
			b: 'c'
		}
	}
};
```

**Output SCSS**
``` scss
$breakpoints:(portraitS:320px,portraitM:360px,portraitL:414px);
$localNavHeight:50px;
```


Originally forked from gist: [jsonToSassVars](https://gist.github.com/Kasu/ea4f4861a81e626ea308) and [prepend-loader](https://gist.github.com/Kasu/29452051023ff5337bd7)

## License

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

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