{"library":"node-sass-json-importer","title":"Node-Sass JSON Importer","description":"node-sass-json-importer provides a mechanism to import JSON and JSON5 files directly into Sass stylesheets when processed by `node-sass`. It allows `@import` rules in Sass to resolve to `.json` or `.json5` files, making it possible to define design tokens, configuration variables, or other data structures in JSON and consume them directly within Sass. The package's last stable version was 4.3.0, released in May 2020. Given its fundamental dependency on the deprecated `node-sass` library, active development has ceased, and new releases are not expected. Its primary differentiator was bridging the gap between JSON data sources and Sass compilation workflows using `node-sass`, offering features like case conversion and custom path resolution, but it is not compatible with modern `sass` (Dart Sass) setups.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install node-sass-json-importer"],"cli":null},"imports":["const jsonImporter = require('node-sass-json-importer');","import jsonImporter from 'node-sass-json-importer';","./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/cli.js --recursive ./src --output ./dist"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const sass = require('node-sass');\nconst jsonImporter = require('node-sass-json-importer');\nconst path = require('path');\nconst fs = require('fs');\n\nconst scssContent = `@import 'colors.json'; body { color: $primary-color; }`;\nconst jsonContent = `{ \"primary-color\": \"red\" }`;\n\n// Create a dummy JSON file for the import\nconst jsonFilePath = path.join(__dirname, 'colors.json');\nfs.writeFileSync(jsonFilePath, jsonContent);\n\nsass.render({\n  data: scssContent,\n  importer: jsonImporter(), // Important: call jsonImporter() to get the function\n}, function(err, result) {\n  if (err) {\n    console.error('Async compilation error:', err);\n  } else {\n    console.log('Compiled CSS (Async):\\n', result.css.toString());\n  }\n  fs.unlinkSync(jsonFilePath); // Clean up\n});\n\nconsole.log('\\n--- Synchronous compilation example ---\\n');\n\nconst scssConfigContent = `@import 'config.json'; .my-element { font-size: $base-font-size; }`;\nconst jsonConfigContent = `{ \"base-font-size\": \"16px\" }`;\nconst jsonConfigPath = path.join(__dirname, 'config.json');\nfs.writeFileSync(jsonConfigPath, jsonConfigContent);\n\ntry {\n  const resultSync = sass.renderSync({\n    data: scssConfigContent,\n    importer: [jsonImporter()], // Can be an array of importers\n  });\n  console.log('Compiled CSS (Sync):\\n', resultSync.css.toString());\n} catch (e) {\n  console.error('Sync compilation error:', e);\n} finally {\n  fs.unlinkSync(jsonConfigPath); // Clean up\n}","lang":"javascript","description":"This quickstart demonstrates how to integrate `node-sass-json-importer` with `node-sass` to process `.json` files within Sass, showing both asynchronous and synchronous `render` methods.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}