vite-plugin-vue-style-bundler

March 25, 2024 · View on GitHub

中文 | 英文

开发Vue组件时，编译产物由js和css组成，导入该组件时需要同时导入js和css。

vite-plugin-vue-style-bundler可以实现, 自动提取Vue组件中的css样式一起打包到js源代码中，然后在运行时将style自动插入到head的vite插件。 这样，经过vite-plugin-vue-style-bundler处理后，导入组件时就只需要导入js就可以了。

安装

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

使用方法

  • 第1步：启用插件
// 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:{},  如果需要使用less，可以配置lessOptions
        // sassOptions:{}   如果需要使用sass，可以配置sassOptions
    }) 
  ],
})
  • 第2步：编写组件
<template>
  <div class="hello">Hello, {{ msg }}</div>
</template>
<style bundle>
.hello {
  color: red;
}
</style>

当在组件的style标签上添加bundle属性后，vite-plugin-vue-style-bundler插件会对该组件源码进行处理。


<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>

说明

  • 插件会在当前vue文件的<script setup>中自动注入代码。
  • 样式会被注入到head的style标签中,style.id默认是根据当前vue文件的路径生成的。也可以通过<style bundle='styleId'>来指定style.id。
  • 如果需要使用less或者sass，可以在插件配置中添加lessOptions或者sassOptions。
  • 默认情况下插件对<style>标签中的css启用scoped模式，这样可以避免产生样式污染。如果不需要scoped模式，可以设置<style scoped='false'>

推荐