node-sass-json-vars v2.0.0

node-sass-json-vars

This module defines additional built-in Sass functions that allow using variables from .json files in .scss files.

Installation

npm install --save-dev node-sass-json-vars

Note: it's recommended to install node-sass-json-vars locally project by project.

Usage

Webpack / sass-loader

webpack.config.js

const sassFunctions = require('node-sass-json-vars');

module.exports = {
...
  {
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: "sass-loader",
        options: {
          sassOptions: {
            functions: sassFunctions,
          },
        },
      },
    ],
  },
...
}

Functions

• getMapFromJSON($key, $config): transforms a JSON Object into a SASS Map.
  • $key: object key, e.g. "colors"
  • $config: path of the config file, e.g. "/path/to/variables.json". Defaults to config/variables.json

Example

config/variables.json

{
	"colors": {
		"catalina-blue": "#1D3557",
		"charlotte": "#A8DADC",
		"panache": "#F1FAEE",
		"amaranth": "#E63946",
		"jelly-bean": "#457B9D"
	}
}

_colors.scss

$colors: getMapFromJSON("colors");

:root {
	// Brand colours.
	@each $colorName, $colorHex in $colors {
		--color-#{$colorName}: #{$colorHex};
	}
}

style.css

:root {
	--color-catalina-blue: #1d3557;
	--color-charlotte: #a8dadc;
	--color-panache: #f1faee;
	--color-amaranth: #e63946;
	--color-jelly-bean: #457b9d;
}