{"library":"node-sass-magic-importer","title":"Sass Magic Importer","description":"node-sass-magic-importer is a custom importer for node-sass that significantly extends its `@import` capabilities. It integrates several specialized functionalities, including selector-specific imports (allowing users to import only certain CSS selectors or nodes from a file, with optional renaming/transformation), automatic `node_modules` resolution without requiring full paths, and globbing support for importing multiple files with a single pattern (e.g., `scss/**/*.scss`). Additionally, it features de-duplication logic to prevent importing the same file multiple times, except when filters are explicitly applied. The current stable version is 5.3.3, and the package maintains an active release cadence for node-sass compatibility. Its primary differentiator is the consolidation of these advanced import features into a single, configurable plugin, streamlining complex Sass import strategies.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install node-sass-magic-importer"],"cli":null},"imports":["import magicImporter from 'node-sass-magic-importer';\n// In usage: importer: magicImporter()","import magicImporter from 'node-sass-magic-importer';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as sass from 'node-sass';\nimport magicImporter from 'node-sass-magic-importer';\nimport * as path from 'path';\nimport { promises as fs } from 'fs';\n\nconst scssContent = `@import '{ .btn, .btn-primary as .button-main } from ../node_modules/bootstrap/scss/buttons';\n@import 'components/**/*.scss';`;\nconst filePath = path.join(process.cwd(), 'styles.scss');\nconst componentPath = path.join(process.cwd(), 'components');\n\n// Create dummy files for globbing and selective import demonstration\nasync function setupDemoFiles() {\n  await fs.mkdir(componentPath, { recursive: true });\n  await fs.writeFile(filePath, scssContent);\n  await fs.writeFile(path.join(componentPath, 'header.scss'), '.header { color: blue; }');\n  await fs.writeFile(path.join(componentPath, 'footer.scss'), '.footer { color: red; }');\n}\n\nasync function compileSass() {\n  await setupDemoFiles();\n\n  try {\n    const result = await new Promise((resolve, reject) => {\n      sass.render({\n        file: filePath,\n        importer: magicImporter(),\n        includePaths: [path.join(process.cwd(), 'node_modules')],\n        outputStyle: 'expanded'\n      }, (err, res) => {\n        if (err) reject(err); else resolve(res);\n      });\n    });\n    console.log('Compiled CSS:\\n', result.css.toString());\n    // Expected output includes .btn, .button-main, .header, .footer\n  } catch (error) {\n    console.error('Sass compilation failed:', error);\n  } finally {\n    // Cleanup dummy files\n    await fs.rm(filePath, { force: true });\n    await fs.rm(componentPath, { recursive: true, force: true });\n  }\n}\n\ncompileSass();","lang":"typescript","description":"This quickstart demonstrates how to set up `node-sass-magic-importer` with `node-sass` to leverage selector filtering from a node module (like Bootstrap) and glob importing for local components. It shows defining an importer, compiling Sass, and handling the output.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}