{"id":13506736,"url":"https://github.com/sugoidesune/nuxt-scss-to-js","last_synced_at":"2025-03-22T16:30:35.501Z","repository":{"id":102663444,"uuid":"268188402","full_name":"sugoidesune/nuxt-scss-to-js","owner":"sugoidesune","description":"Load SCSS Variables into Nuxt instance for use in Tenplates/Scripts.","archived":false,"fork":false,"pushed_at":"2020-06-01T16:27:38.000Z","size":825,"stargazers_count":27,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T23:11:13.618Z","etag":null,"topics":["bootstrap","nuxt-module","nuxt-modules","scss","tailwindcss","vue","vuejs","vuejs2","vuetify"],"latest_commit_sha":null,"homepage":null,"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/sugoidesune.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}},"created_at":"2020-05-31T01:24:07.000Z","updated_at":"2024-04-04T19:39:24.000Z","dependencies_parsed_at":"2024-01-13T19:23:47.107Z","dependency_job_id":"493f44fc-f280-4161-98af-7e5f4510537f","html_url":"https://github.com/sugoidesune/nuxt-scss-to-js","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"ed374a05e5560ed2c624992c91405a7cc4c9b556"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sugoidesune%2Fnuxt-scss-to-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sugoidesune%2Fnuxt-scss-to-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sugoidesune%2Fnuxt-scss-to-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sugoidesune%2Fnuxt-scss-to-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sugoidesune","download_url":"https://codeload.github.com/sugoidesune/nuxt-scss-to-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244124197,"owners_count":20401685,"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":["bootstrap","nuxt-module","nuxt-modules","scss","tailwindcss","vue","vuejs","vuejs2","vuetify"],"created_at":"2024-08-01T01:00:56.476Z","updated_at":"2025-03-22T16:30:35.194Z","avatar_url":"https://github.com/sugoidesune.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# nuxt-scss-to-js\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]\n[![Codecov][codecov-src]][codecov-href]\n[![License][license-src]][license-href]\n\n\u003e Load SCSS Variables into Nuxt instance for use in Templates/Scripts.\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Usage\n\n```scss\n//   /assets/scss/variables.scss\n$primary: #0000ff;\n$secondary: #00ff00;\n$warning: #ff0000;\n```\n\n```html\n\u003ctemplate\u003e\n  This themes primary color is {{$scss.primary}}!\n  \u003cComponent :color=\"$scss.primary\"/\u003e\n\u003c/template\u003e\n```\n\n## Setup\n\n1. Add `nuxt-scss-to-js` dependency to your project\n\n```bash\nyarn add nuxt-scss-to-js # or npm install nuxt-scss-to-js\n```\n\n2. Add `nuxt-scss-to-js` to the `buildModules` section of `nuxt.config.js`\n\n```js\n{\n  buildModules: [\n    // Simple usage\n    'nuxt-scss-to-js',\n\n    // With options\n    ['nuxtScssToJs', { /* module options */ }]\n  ]\n}\n```\n## Options\n\n### `namespace`\n- Type: `String`\n- Default: `scss`\n\nThe name under which the scss variables will be accessible inside nuxt.\n\n```js\n$scss.primary // '#0000ff'\n$scss.secondary // '#00ff00'\n$scss.warning // '#ff0000'\n```\n\n### `path`\n- Type: `String`\n- Default: `'~/asstets/scss/variables.scss'`\n\nThe path to your scss file with variables.\n\n\n### `generate`\n- Type: `Boolean`\n- Default: false\n\nWill generate a `scss.js` file in the same directory as `path`.\nThis file can be used to explicitly import scss variables. Useful for work with other plugins/modules.\n**Name of file depends namespace option**\n\n**Result**\n```dir\n//path directory\n\nvariables.scss\nscss.js\n```\n**Use**\n```js\nimport variables from '~/assets/scss/scss.js'\n```\n\n### `inject`\n- Type: `Boolean`\n- Default: true\n\nBy default the vue instance will be injected with the $scss object containing all scss variables.\nThis can be turned off. Useful in conjuntion with the option `generate`, to only import variables where necessary.\n\n\n## Examples:\n### Example Default Settings\n```js\n// nuxt.config.js\nbuildModules: [\n  'nuxt-scss-to-js'\n]\n```\n```scss\n//   /assets/scss/variables.scss\n$primary: #0000ff;\n```\n```html\n\u003ctemplate\u003e\n  This themes primary color is {{$scss.primary}}!\n  \u003cComponent :color=\"$scss.primary\"/\u003e\n\u003c/template\u003e\n```\n\n### Example with Generate and Namespace\n\n```js\n// nuxt.config.js\nbuildModules: [\n'nuxt-scss-to-js',\n  {\n    generate: true,\n    namespace: 'fancyColors'\n  }\n]\n```\n\n```html\n\u003ctemplate\u003e\n  Use imported {{colors.primary}} or injected {{$fancyColors.primary}}!\n\u003c/template\u003e\n\u003cscript\u003e\nimport colors from '~/assets/scss/fancyColors.js'\nexport default {\n  data(){return{\n    colors\n  }}\n\n}\n\u003c/script\u003e\n```\n\n\n\n## Development\n\n1. Clone this repository\n2. Install dependencies using `yarn install` or `npm install`\n3. Start development server using `npm run dev`\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) sugoidesune\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-scss-to-js/latest.svg\n[npm-version-href]: https://npmjs.com/package/nuxt-scss-to-js\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-scss-to-js.svg\n[npm-downloads-href]: https://npmjs.com/package/nuxt-scss-to-js\n\n[github-actions-ci-src]: https://github.com//workflows/ci/badge.svg\n[github-actions-ci-href]: https://github.com//actions?query=workflow%3Aci\n\n[codecov-src]: https://img.shields.io/codecov/c/github/.svg\n[codecov-href]: https://codecov.io/gh/\n\n[license-src]: https://img.shields.io/npm/l/nuxt-scss-to-js.svg\n[license-href]: https://npmjs.com/package/nuxt-scss-to-js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsugoidesune%2Fnuxt-scss-to-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsugoidesune%2Fnuxt-scss-to-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsugoidesune%2Fnuxt-scss-to-js/lists"}