{"id":21301723,"url":"https://github.com/funbox/scss-imports-loader","last_synced_at":"2025-07-11T20:31:19.880Z","repository":{"id":46133019,"uuid":"306580726","full_name":"funbox/scss-imports-loader","owner":"funbox","description":"Global imports for SCSS files","archived":false,"fork":false,"pushed_at":"2023-05-15T11:57:50.000Z","size":19,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-30T13:53:24.443Z","etag":null,"topics":["scss","webpack","webpack-loader"],"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/funbox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-10-23T08:54:02.000Z","updated_at":"2023-04-18T21:45:17.000Z","dependencies_parsed_at":"2024-06-21T19:06:08.880Z","dependency_job_id":"af743c5e-0e99-43a9-8088-ef779d88dd4a","html_url":"https://github.com/funbox/scss-imports-loader","commit_stats":{"total_commits":17,"total_committers":6,"mean_commits":"2.8333333333333335","dds":0.5294117647058824,"last_synced_commit":"da0b181b1804f31803bb0652419403e1fe480a2e"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/funbox/scss-imports-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-imports-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-imports-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-imports-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-imports-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/funbox","download_url":"https://codeload.github.com/funbox/scss-imports-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-imports-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264892166,"owners_count":23679246,"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":["scss","webpack","webpack-loader"],"created_at":"2024-11-21T15:50:32.720Z","updated_at":"2025-07-11T20:31:14.869Z","avatar_url":"https://github.com/funbox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @funboxteam/scss-imports-loader\n\n[![npm](https://img.shields.io/npm/v/@funboxteam/scss-imports-loader.svg)](https://www.npmjs.com/package/@funboxteam/scss-imports-loader)\n\nWebpack loader that injects predefined `@import` rules into the processed files.\n\n[По-русски](./README.ru.md)\n\n## Rationale\n\nWhen we write styles using SCSS we store some global variables and mixins in the separated files. Most of them are used\nin every component, and therefore in order not to constantly duplicate imports to decided to find a way to list those\nfiles once and make them to be injected everywhere.\n\nIt was possible to use [`additionalData`](https://webpack.js.org/loaders/sass-loader/#additionaldata) from sass-loader,\nbut the plugin way turned out to be more convenient.\n\n## Getting Started\n\nInstall the loader in your project:\n\n```bash\nnpm install --save-dev @funboxteam/scss-imports-loader\n```\n\nAdd it into the project's Webpack config so that it is called before sass-loader, and set `options.path` to the list\nof injected paths to files:\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          // ...\n          'sass-loader',\n          {\n            loader: '@funboxteam/scss-imports-loader',\n            options: {\n              paths: [\n                'app/styles/variables/colors',\n                'app/styles/variables/breakpoints',\n                'app/styles/variables/layout',\n                'app/styles/variables/typography',\n                'app/styles/mixins/respond-to',\n                'app/styles/mixins/placeholder',\n                'app/styles/mixins/text-cut',\n                'app/styles/mixins/visually-hidden',\n              ],\n            },\n          },\n          // ...\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Implementation details\n\nIf you pass the same imports like above, then these strings will be added into the beginning of the every processed \nSCSS file during the build stage: \n\n```scss\n@import 'app/styles/variables/colors';\n@import 'app/styles/variables/breakpoints';\n@import 'app/styles/variables/layout';\n@import 'app/styles/variables/typography';\n@import 'app/styles/mixins/respond-to';\n@import 'app/styles/mixins/placeholder';\n@import 'app/styles/mixins/text-cut';\n@import 'app/styles/mixins/visually-hidden';\n```\n\nThat means the paths in `options.path` have to be “available to resolve” by Webpack. \n\nIn general, the imported files don't have to be SCSS files.\nIt's enough that the set of loaders listed in the Webpack config can handle them.\n\n[![Sponsored by FunBox](https://funbox.ru/badges/sponsored_by_funbox_centered.svg)](https://funbox.ru)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunbox%2Fscss-imports-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunbox%2Fscss-imports-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunbox%2Fscss-imports-loader/lists"}