{"id":14964215,"url":"https://github.com/nuxt-modules/style-resources","last_synced_at":"2026-01-12T05:34:06.688Z","repository":{"id":33240155,"uuid":"156722827","full_name":"nuxt-modules/style-resources","owner":"nuxt-modules","description":"Style Resources for Nuxt 3","archived":false,"fork":false,"pushed_at":"2025-05-05T13:49:41.000Z","size":1107,"stargazers_count":604,"open_issues_count":36,"forks_count":22,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-15T12:07:09.211Z","etag":null,"topics":["import","less","nuxt","nuxt-module","nuxtjs","sass","stylus"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/nuxt-modules.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,"zenodo":null}},"created_at":"2018-11-08T14:55:12.000Z","updated_at":"2025-05-11T21:52:14.000Z","dependencies_parsed_at":"2023-09-28T20:28:54.817Z","dependency_job_id":"f8d19f11-0d7a-441c-a330-e98a46f2e3b3","html_url":"https://github.com/nuxt-modules/style-resources","commit_stats":{"total_commits":95,"total_committers":12,"mean_commits":7.916666666666667,"dds":0.7157894736842105,"last_synced_commit":"4ba7cc35b1c91c59b9ce624731502f050fb228b8"},"previous_names":["nuxt-modules/style-resources","nuxt-community/style-resources-module"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fstyle-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fstyle-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fstyle-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fstyle-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxt-modules","download_url":"https://codeload.github.com/nuxt-modules/style-resources/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337606,"owners_count":22054254,"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":["import","less","nuxt","nuxt-module","nuxtjs","sass","stylus"],"created_at":"2024-09-24T13:32:47.948Z","updated_at":"2026-01-12T05:34:01.644Z","avatar_url":"https://github.com/nuxt-modules.png","language":"TypeScript","readme":"# Style Resources for Nuxt 3 - Nobody likes extra @import statements!\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Codecov][codecov-src]][codecov-href]\n[![License][license-src]][license-href]\n\nNuxt 2 is supported with `@nuxtjs/style-resources@^1`, documentation is on [v1](https://github.com/nuxt-community/style-resources-module/tree/v1) branch.\n\nIf you are using Vite, this module is not needed.\n\nYou can use the [`css.preprocessorOptions`](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions) instead.\n\n[📖 **Release Notes**](CHANGELOG.md)\n\n## Features\n\n* Share variables, mixins, functions across all style files (no `@import` needed)\n* Support for SASS, LESS and Stylus\n* Aliases (`~/assets/variables.css`) and globbing as supported\n* Support for hoisting `@use` imports\n* Compatible with Nuxt's `build.styleResources` (and will take them over directly if included!)\n* Blazing fast:tm:\n\n## Warning\n\n**Do not import actual styles**.\nUse this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower.\n**Do not do this!**\n\n## Setup\n\n- If not already present, add the dependencies you need for SASS/LESS/Stylus (depending on your needs)\n  - SASS: `yarn add sass-loader sass`\n  - LESS: `yarn add less-loader less`\n  - Stylus: `yarn add stylus-loader stylus`\n- Add `@nuxtjs/style-resources` dependency using yarn or npm to your project (`yarn add -D @nuxtjs/style-resources`)\n- Add `@nuxtjs/style-resources` to `modules` section of `nuxt.config.ts`:\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxtjs/style-resources',\n  ],\n\n  styleResources: {\n   // your settings here\n   sass: [],\n   scss: [],\n   less: [],\n   stylus: [],\n   hoistUseStatements: true  // Hoists the \"@use\" imports. Applies only to \"sass\", \"scss\" and \"less\". Default: false.\n  }\n})\n```\n\n## Examples\n\n### LESS Example\n\n`nuxt.config.ts`:\n```js\nexport default defineNuxtConfig({\n  css: ['~assets/global.less'],\n  modules: ['@nuxtjs/style-resources'],\n  styleResources: {\n    less: './assets/vars/*.less'\n  }\n})\n```\n\n`assets/global.less`\n```less\nh1 {\n  color: @green;\n}\n```\n\n`assets/vars/variables.less`\n\n```less\n@gray: #333;\n```\n\n`assets/vars/more_variables.less`\n\n```less\n@green: #00ff00;\n```\n\n`pages/index.vue`\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- This h1 will be green --\u003e\n    \u003ch1\u003eTest\u003c/h1\u003e\n    \u003ctest/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Test from '~/components/Test'\n\nexport default {\n  components: { Test }\n}\n\u003c/script\u003e\n\n```\n\n`components/Test.vue`\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"ymca\"\u003e\n    Test\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle lang=\"less\"\u003e\n  .ymca {\n    color: @gray; // will be resolved to #333\n  }\n\u003c/style\u003e\n```\n\n---\n\n### SCSS Example\n\n`nuxt.config.ts`:\n```js\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/style-resources'],\n  styleResources: {\n    scss: [\n      './assets/vars/*.scss',\n      './assets/abstracts/_mixins.scss' // use underscore \"_\" \u0026 also file extension \".scss\"\n      ]\n  }\n})\n```\n\n\u003e Instead of `'./assets/abstracts/_mixins.scss'` you can use also `'~assets/abstracts/_mixins.scss'`\n\n`assets/vars/_colors.scss`\n```scss\n$gray: #333;\n```\n\n`assets/abstracts/_mixins.scss`\n\n```scss\n@mixin center() {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate3d(-50%, -50%, 0);\n}\n```\n\n`components/Test.vue`\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"ymca\"\u003e\n    Test\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle lang=\"scss\"\u003e\n  .ymca {\n    @include center; // will be resolved as position:absolute....\n    color: $gray; // will be resolved to #333\n  }\n\u003c/style\u003e\n```\n\n---\n\n## License\n\nInspired by [nuxt-sass-resources-loader](https://github.com/anteriovieira/nuxt-sass-resources-loader).\n\n[MIT License](LICENSE)\n\nCopyright (c) Alexander Lichter\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/style-resources/latest.svg?style=flat-square\n[npm-version-href]: https://npmjs.com/package/@nuxtjs/style-resources\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/style-resources.svg?style=flat-square\n[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/style-resources\n\n[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/style-resources-module.svg?style=flat-square\n[codecov-href]: https://codecov.io/gh/nuxt-community/style-resources-module\n\n[license-src]: https://img.shields.io/npm/l/@nuxtjs/style-resources.svg?style=flat-square\n[license-href]: https://npmjs.com/package/@nuxtjs/style-resources\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-modules%2Fstyle-resources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxt-modules%2Fstyle-resources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-modules%2Fstyle-resources/lists"}