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 bundle>
.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>
<script setup>
+   const $insertStylesheet = (id,css)=>{
+        let style = document.getElementById('ho79thw')
+        if(!style){
+            style = document.createElement("style")
+            style.id = 'ho79thw'
+            document.head.appendChild(style)            
+            style.innerHTML = css
+        }
+    }
+    $insertStylesheet(`
+      .hello {
+        color: red;
+      }
+    `)
</script>
- <style bundle>
- .hello {
-   color: red;
- }
- </style>

Explain

• The plugin automatically injects code into the of the current vue file.
• The styles will be injected into the style tag in the document head, and the style.id is generated based on the path of the current vue file by default. It can also be specified through <style bundle='styleId'>.
• If you need to use less or sass, you can add lessOptions or sassOptions in the plugin configuration.
• By default, the plugin enables the scoped mode for css in the <style> tag, so as to avoid style pollution. If scoped mode is not needed, you can set <style scoped='false'>.

Recommendation

• Internationalization Solution for React/Vue/Nodejs - VoerkaI18n
• React Form Development Library - speedform
• Terminal Interface Development Enhancement Library - Logsets
• Log Output Library - VoerkaLogger
• Decorator Development - FlexDecorators
• Finite State Machine Library - FlexState
• Universal Function Tool Library - FlexTools
• CSS-IN-JS Library - Styledfc
• VSCode Plugin for Adding Comments to JSON Files - json_comments_extension
• Library for Developing Interactive Command Line Programs - mixed-cli
• Powerful String Interpolation Variable Processing Tool Library - flexvars
• Frontend Link Debugging Assistant Tool - yald
• Asynchronous Signal - asyncsignal
• Vue Tree Component- LiteTree

License

MIT