Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

node-sass-json-importer

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

node-sass-json-importer

Allows importing json in sass files parsed by node-sass.

  • 4.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
27K
increased by19.89%
Maintainers
1
Weekly downloads
 
Created
Source

node-sass-json-importer

JSON importer for node-sass. Allows @importing .json or .json5 files in Sass files parsed by node-sass.

npm build status

Usage

node-sass

This module hooks into node-sass's importer api.

var sass = require('node-sass');
var jsonImporter = require('node-sass-json-importer');

// Example 1
sass.render({
  file: scss_filename,
  importer: jsonImporter(),
  [, options..]
}, function(err, result) { /*...*/ });

// Example 2
var result = sass.renderSync({
  data: scss_content
  importer: [jsonImporter(), someOtherImporter]
  [, options..]
});

node-sass command-line interface

To run this using node-sass CLI, point --importer to your installed json importer, for example:

./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/cli.js --recursive ./src --output ./dist

Webpack / sass-loader

Webpack v1
import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    loaders: [{
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }],
  },
  // Apply the JSON importer via sass-loader's options.
  sassLoader: {
    importer: jsonImporter()
  }
};
Webpack v2
import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            },
          },
          {
            loader: 'sass-loader',
            // Apply the JSON importer via sass-loader's options.
            options: {
              importer: jsonImporter(),
            },
          },
        },
      ],
    ],
  },
};

Importing

Importing strings

Since JSON doesn't map directly to SASS's data types, a common source of confusion is how to handle strings. While SASS allows strings to be both quoted and unquoted, strings containing spaces, commas and/or other special characters have to be wrapped in quotes. In terms of JSON, this means the string has to be double quoted:

Incorrect
{
  "description": "A sentence with spaces."
}
Correct
{
  "description": "'A sentence with spaces.'"
}

See discussion here for more:

https://github.com/Updater/node-sass-json-importer/pull/5

Importing *.js Files

You can also import *.js Files. This way you can use javascript to compose and export json structure for node-sass-json-importer.

const xl = require('./variables.json')
const md = require('./variables-md.json')
const xs = require('./variables-xs.json')

module.exports = {
    xl,
    md,
    xs,
}

Custom resolver

Should you care to resolve paths, say, starting with ~/ relative to project root or some other arbitrary directory, you can do it as follows:

1.sass:

@import '~/1.json'
body
    margin: $body-margin

json/1.json:

{"body-margin": 0}
var path = require('path');
var sass = require('node-sass');
var jsonImporter = require('../dist/node-sass-json-importer');

sass.render({
  file: './1.sass',
  importer: jsonImporter({
    resolver: function(dir, url) {
      return url.startsWith('~/')
        ? path.resolve(dir, 'json', url.substr(2))
        : path.resolve(dir, url);
    },
  }),
}, function(err, result) { console.log(err || result.css.toString()) });

camelCase to kebab-case

If you want to convert standard JavaScript caseCase keys into CSS/SCSS compliant kebab-case keys, for example:

variables.json:

{
  "bgBackgroundColor": 'red'
}

For usage like this:

style.scss:

@import "variables.json";

div {
  background: $bg-background-color;
}

You can pass set the convertCase option to true as an argument to jsonImporter like so:

sass.render({
  file: './1.sass',
  importer: jsonImporter({
    convertCase: true,
  }),
}, function(err, result) { console.log(err || result.css.toString()) });

Thanks to

This module is based on the sass-json-vars gem, which unfortunately isn't compatible with node-sass.

Keywords

FAQs

Package last updated on 02 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc