{"id":16073320,"url":"https://github.com/wjchumble/vite-plugin-vue2-css-vars","last_synced_at":"2025-03-18T05:31:13.562Z","repository":{"id":57393233,"uuid":"372373434","full_name":"WJCHumble/vite-plugin-vue2-css-vars","owner":"WJCHumble","description":"A vite plugin that can allows you to  use the CSS variable injection feature in Vue 2.x version.","archived":false,"fork":false,"pushed_at":"2022-04-03T01:13:19.000Z","size":164,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-16T16:53:58.301Z","etag":null,"topics":["css","injection","variables","vue2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-vue2-css-vars","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/WJCHumble.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"WJCHumble"}},"created_at":"2021-05-31T03:38:25.000Z","updated_at":"2023-04-07T07:43:33.000Z","dependencies_parsed_at":"2022-08-27T11:11:33.272Z","dependency_job_id":null,"html_url":"https://github.com/WJCHumble/vite-plugin-vue2-css-vars","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJCHumble%2Fvite-plugin-vue2-css-vars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJCHumble%2Fvite-plugin-vue2-css-vars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJCHumble%2Fvite-plugin-vue2-css-vars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WJCHumble%2Fvite-plugin-vue2-css-vars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WJCHumble","download_url":"https://codeload.github.com/WJCHumble/vite-plugin-vue2-css-vars/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244164927,"owners_count":20409009,"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":["css","injection","variables","vue2"],"created_at":"2024-10-09T08:06:24.397Z","updated_at":"2025-03-18T05:31:12.667Z","avatar_url":"https://github.com/WJCHumble.png","language":"TypeScript","funding_links":["https://github.com/sponsors/WJCHumble"],"categories":[],"sub_categories":[],"readme":"## vite-plugin-vue2-css-vars\n\n一个可以让你在 Vue 2.x 版本使用 **CSS 变量注入**特性的 Vite 插件。\n\n## Usage\n\n安装:\n\n```bash\nnpm i vite-plugin-vue2-css-vars -D\n```\n\n将 `vite-plugin-vue2-css-vars` 插件添加到 `vite.config.ts`（或者 `vite.config.js`），注意该插件必须添加在 `vite-plugin-vue2` 插件之前：\n\n```javascript\nimport { defineConfig } from \"vite\";\nimport { createVuePlugin } from \"vite-plugin-vue2\";\nimport vitePluginVue2CssVars from \"vite-plugin-vue2-css-vars\";\n\nexport default defineConfig({\n  plugins: [vitePluginVue2CssVars(), createVuePlugin()],\n});\n```\n\n然后，你可以在 SFC（单文件组件）的 `\u003cstyle\u003e` 中通过 `v-bind()` 指令使用 `data` 选项的参数：\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"changeColor\"\u003echange color\u003c/button\u003e\n    \u003cdiv class=\"word\"\u003evue2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return {\n        color: \"blue\",\n      };\n    },\n    methods: {\n      changeColor() {\n        if (this.color === \"red\") {\n          this.color = \"black\";\n        } else {\n          this.color = \"red\";\n        }\n      },\n    },\n  };\n\u003c/script\u003e\n\n\u003cstyle scoped vars\u003e\n  .word {\n    background: v-bind(color);\n  }\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwjchumble%2Fvite-plugin-vue2-css-vars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwjchumble%2Fvite-plugin-vue2-css-vars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwjchumble%2Fvite-plugin-vue2-css-vars/lists"}