node-sass-json-importer
JSON importer for node-sass. Allows @import
ing .json
or .json5
files in Sass files parsed by node-sass
.
Usage
node-sass
This module hooks into node-sass's importer api.
var sass = ;var jsonImporter = ; // Example 1sass; // Example 2var result = sass;
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
sass-loader
Webpack /Webpack v1
; // Webpack config module: loaders: test: /\.scss$/ loaders: "style" "css" "sass" // Apply the JSON importer via sass-loader's options. sassLoader: importer: ;
Webpack v2
; // Webpack config 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: ;
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
Correct
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
:
json/1.json
:
var path = ;var sass = ;var jsonImporter = ; sass;
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;
Thanks to
This module is based on the sass-json-vars gem, which unfortunately isn't compatible with node-sass
.