vite-plugin-vue-style-bundler

中文 | 英文

When developing Vue components, the compiled products consist of js and css, and both js and css need to be imported when importing the component.

vite-plugin-vue-style-bundler can automatically extract the css styles in Vue components and bundle them into the js source code, and then automatically insert the style into the head at runtime. After being processed by vite-plugin-vue-style-bundler, you only need to import js when importing components.

Install

npm install vite-plugin-vue-style-bundler
// or
pnpm add vite-plugin-vue-style-bundler
// or 
yarn add vite-plugin-vue-style-bundler

Usage

• Step 1：Install Plugin

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' 
import StyleBundler from "vite-plugin-vue-style-bundler"

export default defineConfig({
  plugins: [    
    vue(),
    StyleBundler({    
        // lessOptions:{},  if you need to use less, you can configure lessOptions
        // sassOptions:{}   if you need to use sass/scss, you can configure sassOptions
    }) 
  ],
})

• 第2步：Writing Components

<template>
  <div class="hello">Hello, {{ msg }}</div>
</template>
<style>
.hello {
  color: red;
}
</style>

When the bundle attribute is added to the style tag of the component, the vite-plugin-vue-style-bundler plugin will process the source code of the component.

<template>
  <div class="hello">Hello, {{ msg }}</div>
</template>

- <style>
- .hello {
-   color: red;
- }
- </style>

Explain

• The plugin automatically injects code into the