https://github.com/wjchumble/vite-plugin-vue2-css-vars

A vite plugin that can allows you to use the CSS variable injection feature in Vue 2.x version.
https://github.com/wjchumble/vite-plugin-vue2-css-vars

css injection variables vue2

Last synced: 4 months ago
JSON representation

A vite plugin that can allows you to use the CSS variable injection feature in Vue 2.x version.

• Host: GitHub
• URL: https://github.com/wjchumble/vite-plugin-vue2-css-vars
• Owner: WJCHumble
• License: mit
• Created: 2021-05-31T03:38:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-03T01:13:19.000Z (almost 3 years ago)
• Last Synced: 2024-10-09T08:08:09.752Z (4 months ago)
• Topics: css, injection, variables, vue2
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vite-plugin-vue2-css-vars
• Size: 160 KB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README-CN.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
## vite-plugin-vue2-css-vars

一个可以让你在 Vue 2.x 版本使用 **CSS 变量注入**特性的 Vite 插件。

## Usage

安装:

```bash

npm i vite-plugin-vue2-css-vars -D

```

将 `vite-plugin-vue2-css-vars` 插件添加到 `vite.config.ts`（或者 `vite.config.js`），注意该插件必须添加在 `vite-plugin-vue2` 插件之前：

```javascript

import { defineConfig } from "vite";

import { createVuePlugin } from "vite-plugin-vue2";

import vitePluginVue2CssVars from "vite-plugin-vue2-css-vars";

export default defineConfig({

  plugins: [vitePluginVue2CssVars(), createVuePlugin()],

});

```

然后，你可以在 SFC（单文件组件）的 `` 中通过 `v-bind()` 指令使用 `data` 选项的参数：

```html

<template>

  <div>

    <button @click="changeColor">change color</button>

    <div class="word">vue2</div>

  </div>

</template>

<script>

  export default {

    data() {

      return {

        color: "blue",

      };

    },

    methods: {

      changeColor() {

        if (this.color === "red") {

          this.color = "black";

        } else {

          this.color = "red";

        }

      },

    },

  };

</script>

<style scoped vars>

  .word {

    background: v-bind(color);

  }

```