{"id":15041670,"url":"https://github.com/codebymikey/node-sass-conditional-importer","last_synced_at":"2026-01-07T11:15:50.718Z","repository":{"id":143898967,"uuid":"313401009","full_name":"codebymikey/node-sass-conditional-importer","owner":"codebymikey","description":"A conditional/dynamic importer for node-sass.","archived":false,"fork":false,"pushed_at":"2020-11-17T23:25:40.000Z","size":162,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T15:22:16.535Z","etag":null,"topics":["conditional-import","dynamic-imports","node-sass"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codebymikey.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-16T19:06:42.000Z","updated_at":"2024-02-05T19:19:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"ba0a13a2-97cc-47dd-9c3e-a23aca735637","html_url":"https://github.com/codebymikey/node-sass-conditional-importer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebymikey%2Fnode-sass-conditional-importer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebymikey%2Fnode-sass-conditional-importer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebymikey%2Fnode-sass-conditional-importer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebymikey%2Fnode-sass-conditional-importer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebymikey","download_url":"https://codeload.github.com/codebymikey/node-sass-conditional-importer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245831493,"owners_count":20679699,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["conditional-import","dynamic-imports","node-sass"],"created_at":"2024-09-24T20:46:21.356Z","updated_at":"2026-01-07T11:15:50.634Z","avatar_url":"https://github.com/codebymikey.png","language":"JavaScript","readme":"# node-sass-conditional-importer\n\nA conditional/dynamic importer for [node-sass]. It provides the ability to `@import` Sass files dynamically based on \ntheir (environment) extension prefix, similar to React Native's \n[platform-specific extensions][react-platform-specific-extensions] behaviour.\n\n[![npm](https://img.shields.io/npm/v/node-sass-conditional-importer.svg)](https://www.npmjs.com/package/node-sass-conditional-importer)\n[![Codecov Coverage](https://img.shields.io/codecov/c/github/codebymikey/node-sass-conditional-importer/coverage.svg?style=flat-square)](https://codecov.io/gh/codebymikey/node-sass-conditional-importer/)\n[![Release](https://github.com/codebymikey/node-sass-conditional-importer/workflows/Release/badge.svg)](https://github.com/codebymikey/node-sass-conditional-importer/actions?query=workflow%3ARelease)\n\nIt reads in a list of `environments` extension prefixes, which it'll attempt to use over the default file.\n\nThe example use case for this importer is as follows, say you have the following folder structure:\n\n```\nscss\n├── custom\n│   ├── style.custom.scss\n│   ├── style.development.scss\n│   ├── style.production.scss\n│   └── style.scss\n└── main.scss\n```\n\nAnd you want to import a different version of `style.scss` based on a given build environment/variable.\nThis is not currently possible easily because Sass does not allow dynamic `@import`s \n[using interpolation][sass-no-dynamic-imports] or in [`if` statements][sass-no-if-imports].\n\nThis importer allows you to simply pass in your current environment into the importer, and it checks \nfor whether the environment-specific override file exists before importing it.\n\nThe `environments` will be a list of environments ordered by the priority with which they should be used.\n\nIf none of the environment file overrides are available, then it falls back to the original file.\n\n## Usage\n### Configuration options\n* `environments`: An array of environment extensions to look up. e.g.\n    ```javascript\n    // process.env.NODE_ENV = 'production';\n    // Look for [`${file}.production.scss`, `${file}.fallback.scss`]\n    [process.env.NODE_ENV, 'fallback']\n    ```\n\n### [node-sass]\nThis module hooks into [node-sass's importer api][node-sass-importer-api].\n\n```javascript\nvar sass = require('node-sass');\nvar conditionalImporter = require('node-sass-conditional-importer');\n\nsass.render({\n  file: scssFilename,\n  importer: [\n    conditionalImporter({\n      environments: [\n        // Search for `*.custom.scss` files first,\n        // Followed `*.(development|production).scss` files.\n        'custom',\n        process.env.NODE_ENV,\n      ],\n    }),\n    // .. other importers\n  ],\n}, function(err, result) { /*...*/ });\n```\n\n### Webpack / [sass-loader](https://github.com/jtangelder/sass-loader)\n\n#### Webpack v1\n\n```javascript\nimport conditionalImporter from 'node-sass-conditional-importer';\n\n// Webpack config\nexport default {\n  module: {\n    loaders: [{\n      test: /\\.scss$/,\n      loaders: ['style', 'css', 'sass']\n    }],\n  },\n  sassLoader: {\n    importer: conditionalImporter({\n      environments: [\n        // Import based on the NODE_ENV environment variable.\n        process.env.NODE_ENV,\n      ],\n    })\n  }\n};\n```\n\n#### Webpack v2\n\n```javascript\nimport conditionalImporter from 'node-sass-conditional-importer';\n\n// Webpack config\nexport default {\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          'style-loader',\n          {\n            loader: 'css-loader',\n            options: {\n              importLoaders: 1\n            },\n          },\n          {\n            loader: 'sass-loader',\n            options: {\n              importer: conditionalImporter({\n                environments: [\n                  // Import based on the NODE_ENV environment variable.\n                  process.env.NODE_ENV,\n                ],\n              }),\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Custom resolver\n\nShould you care to resolve paths using some kind of custom logic, for example,\nresolving `~/` relative to the project root or some other arbitrary directory, \nyou can do it using the following:\n\n`main.scss`:\n\n```scss\n@import '~/dynamic.scss';\nbody {\n  background: $background;\n}\n```\n\n`custom/dynamic.myenvironment.scss`:\n\n```scss\n$background: red;\n```\n\n```js\nvar path = require('path');\nvar sass = require('node-sass');\nvar conditionalImporter = require('node-sass-conditional-importer');\n\nsass.render({\n  file: './main.scss',\n  importer: [\n    conditionalImporter({\n      environments: ['myenvironment'],\n      resolver: function(dir, url) {\n        return url.startsWith('~/')\n          ? path.resolve(dir, 'custom', url.substr(2))\n          : path.resolve(dir, url);\n      },\n    })  \n  ],\n}, function(err, result) { console.log(err || result.css.toString()) });\n```\n\n## Known issues\n\n- With a folder structure like:\n    ```\n    scss\n    ├── custom\n    │   ├── style.custom.scss\n    │   ├── style.development.scss\n    │   ├── style.production.scss\n    │   └── style.scss\n    └── main.scss\n    ```\n\n    A file like `style.production.scss` may not be used to import `style.scss` as it'll result in an import loop.\n\n    The recommended solution is to create a shared include file like `_style--shared.scss` and import that instead.\n\n## Thanks to\nThis importer is inspired by [node-sass-json-importer].\n\n## 📄 License\n\nnode-sass-conditional-importer is MIT licensed, as found in the [LICENSE][license] file.\n\n[node-sass]: https://github.com/sass/node-sass\n[react-platform-specific-extensions]: https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions\n[node-sass-importer-api]: https://github.com/sass/node-sass#importer--v200---experimental\n[node-sass-json-importer]: https://github.com/pmowrer/node-sass-json-importer\n[sass-no-dynamic-imports]: https://sass-lang.com/documentation/at-rules/import#interpolation\n[sass-no-if-imports]: https://stackoverflow.com/q/13879042\n[license]: https://github.com/codebymikey/node-sass-conditional-importer/blob/master/LICENSE.md\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebymikey%2Fnode-sass-conditional-importer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebymikey%2Fnode-sass-conditional-importer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebymikey%2Fnode-sass-conditional-importer/lists"}