自动捆绑Vue组件CSS样式-CSS-IN-JS

news/2025/2/23 15:26:21

vitepluginvuestylebundler_0">vite-plugin-vue-style-bundler

开发Vue组件时，编译产物由js和css组成，导入该组件时需要同时导入js和css。
vite-plugin-vue-style-bundler可以实现自动提取Vue组件中的css样式一起打包到js源代码中，然后在运行时将style自动插入到head的vite插件。
这样，经过vite-plugin-vue-style-bundler处理后，导入组件时就只需要导入js就可以了，这在开发组件库时特殊方便。

访问Github

安装

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。
插件的enforce="pre"，这意味插件总是@vitejs/plugin-vue之前执行。