{"id":21301719,"url":"https://github.com/funbox/scss-vars-loader","last_synced_at":"2025-07-11T20:31:18.673Z","repository":{"id":46133021,"uuid":"306638782","full_name":"funbox/scss-vars-loader","owner":"funbox","description":"SCSS variables for BEM-blocks","archived":false,"fork":false,"pushed_at":"2023-05-16T11:29:10.000Z","size":12,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-27T12:43:20.618Z","etag":null,"topics":["bem","bem-methodology","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-23T13:02:08.000Z","updated_at":"2023-04-18T21:45:19.000Z","dependencies_parsed_at":"2024-06-21T15:54:45.092Z","dependency_job_id":null,"html_url":"https://github.com/funbox/scss-vars-loader","commit_stats":{"total_commits":14,"total_committers":4,"mean_commits":3.5,"dds":0.4285714285714286,"last_synced_commit":"34d87e857187e26a9c602417fb9b97f10716a2e0"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/funbox/scss-vars-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-vars-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-vars-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-vars-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-vars-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/funbox","download_url":"https://codeload.github.com/funbox/scss-vars-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funbox%2Fscss-vars-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264892162,"owners_count":23679245,"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":["bem","bem-methodology","scss","webpack","webpack-loader"],"created_at":"2024-11-21T15:50:32.061Z","updated_at":"2025-07-11T20:31:13.663Z","avatar_url":"https://github.com/funbox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @funboxteam/scss-vars-loader\n\n[![npm](https://img.shields.io/npm/v/@funboxteam/scss-vars-loader.svg)](https://www.npmjs.com/package/@funboxteam/scss-vars-loader)\n\nWebpack loader that injects `$b` variable declaration to the processed files with the name of the current BEM block\nas a value.\n\n[По-русски](./README.ru.md)\n\n## Rationale\n\nWhen we develop web apps we use BEM on filesystem. Sometimes blocks become too huge to handle them easily,\nand when you suddenly need to rename one, you have to rewrite the name in every file. To make it a bit easier\nwe decided to unify block name in SCSS files by `$b` variable.\n\nAt the same time it allows us to generate SCSS files using templates and not to care about the proper name \nof the selector there. \n\n## Getting Started\n\nInstall the loader in your project:\n\n```bash\nnpm install --save-dev @funboxteam/scss-vars-loader\n```\n\nAdd it into the project's Webpack config so that it is called before sass-loader:\n\n```js\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          // ...\n          'sass-loader',\n          '@funboxteam/scss-vars-loader',\n          // ...\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Usage\n\nUse `$b` to construct SCSS selectors:\n\n```scss\n.#{$b}__elem_mod_value {\n  color: red;\n}\n```\n\n## Implementation details\n\nAt the build stage this line is added into the each processed file:\n\n```scss\n$b: 'blockname';\n```\n\nTo find out the name of the current BEM block properly, the loader goes though the path of the processed file\nfrom right to left and searches the first directory name which does not start with `_` and uses such directory\nas a value for `$b`.\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-vars-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunbox%2Fscss-vars-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunbox%2Fscss-vars-loader/lists"}