fix(CSS): 修复UI组件CSS类为空的问题

- 库模式默认JS与CSS独立，引入插件合并
- 修改variables文件名为_variables
- 删除所有scoped，更遵循库开发规范

BREAKING CHANGES: 2.0.0->2.1.0

README.md

@@ -93,4 +93,10 @@ knowai-ui/
 - 修复打包产物被覆盖问题
 - 支持tree-shaking，不暴露内部路径
 
+### 2025-11-17
+- 删除全部组件vue实现style部分的scoped属性
+- 加入"vite-plugin-css-injected-by-js"插件，解决库模式下CSS文件独立打包无法注入的问题
+- 在vite入口引入所有scss文件，打包入es.js编译结果入口
+- JS仍保持tree-shaking优化，但css文件不再独立打包，而是与JS文件合并
+
 

package.json

@@ -46,7 +46,8 @@
     "@typescript-eslint/eslint-plugin": "^8.46.4",
     "@typescript-eslint/parser": "^8.46.4",
     "@vue/eslint-config-typescript": "^14.1.0",
-    "eslint-plugin-vue": "^9.33.0"
+    "eslint-plugin-vue": "^9.33.0",
+    "vite-plugin-css-injected-by-js": "^3.0.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       vite:
         specifier: ^4.5.0
         version: 4.5.14(@types/node@20.19.25)(sass@1.94.0)
+      vite-plugin-css-injected-by-js:
+        specifier: ^3.0.0
+        version: 3.5.2(vite@4.5.14(@types/node@20.19.25)(sass@1.94.0))
       vitest:
         specifier: ^0.34.6
         version: 0.34.6(jsdom@22.1.0)(sass@1.94.0)
@@ -1575,6 +1578,11 @@ packages:
     engines: {node: '>=v14.18.0'}
     hasBin: true
 
+  vite-plugin-css-injected-by-js@3.5.2:
+    resolution: {integrity: sha512-2MpU/Y+SCZyWUB6ua3HbJCrgnF0KACAsmzOQt1UvRVJCGF6S8xdA3ZUhWcWdM9ivG4I5az8PnQmwwrkC2CAQrQ==}
+    peerDependencies:
+      vite: '>2.0.0-0'
+
   vite@4.5.14:
     resolution: {integrity: sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3300,6 +3308,10 @@ snapshots:
       - supports-color
       - terser
 
+  vite-plugin-css-injected-by-js@3.5.2(vite@4.5.14(@types/node@20.19.25)(sass@1.94.0)):
+    dependencies:
+      vite: 4.5.14(@types/node@20.19.25)(sass@1.94.0)
+
   vite@4.5.14(@types/node@20.19.25)(sass@1.94.0):
     dependencies:
       esbuild: 0.18.20

src/components/Avatar/index.vue

@@ -116,6 +116,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Button/index.vue

@@ -109,6 +109,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/ChatBubble/index.vue

@@ -198,6 +198,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Container/index.vue

@@ -130,6 +130,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Divider/index.vue

@@ -98,6 +98,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Empty/index.vue

@@ -74,6 +74,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Grid/index.vue

@@ -129,6 +129,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Icon/index.vue

@@ -181,6 +181,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Image/index.vue

@@ -200,6 +200,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Loading/index.vue

@@ -108,6 +108,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Message/index.vue

@@ -189,6 +189,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Notification/index.vue

@@ -225,6 +225,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Result/index.vue

@@ -125,6 +125,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Space/index.vue

@@ -90,6 +90,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Tag/index.vue

@@ -118,6 +118,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/components/Text/index.vue

@@ -116,6 +116,6 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use './index.scss' as *;
 </style>

src/index.ts

@@ -1,6 +1,27 @@
 import type { App } from 'vue';
 import * as Components from './components/index';
 
+// 引入所有scss
+import './styles/index.scss';
+import './components/Avatar/index.scss'
+import './components/Tag/index.scss'
+import './components/Image/index.scss'
+import './components/ChatBubble/index.scss'
+import './components/Message/index.scss'
+import './components/Notification/index.scss'
+import './components/Loading/index.scss'
+import './components/Result/index.scss'
+import './components/Empty/index.scss'
+import './components/Divider/index.scss'
+import './components/Button/index.scss'
+import './components/Container/index.scss'
+import './components/Grid/index.scss'
+import './components/Space/index.scss'
+import './components/Text/index.scss'
+import './components/Icon/index.scss'
+
+
+
 // 组件列表
 const components = [
   // 基础视觉系统组件（保留）

src/styles/index.scss

@@ -1,8 +1,8 @@
 // KnowAI UI组件库基础样式
 
 // 引入SCSS变量系统
-@forward './variables.scss';
+@forward './_variables.scss';
-@use './variables.scss' as *;
+@use './_variables.scss' as *;
 
 // 重置样式
 *,

vite.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig({
-  // 插件数组
+  plugins: [
-  plugins: [vue()],
+    vue(),
-  // 路径别名
+    cssInjectedByJsPlugin() 
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
@@ -13,17 +15,15 @@ export default defineConfig({
     }
   },
   build: {
-    // 构建为库模式
     lib: {
       entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
       name: 'knowaiUi',
       fileName: (format) => `knowai-ui.${format}.js`
     },
-    // 输出目录
     outDir: 'dist/client',
     emptyOutDir: false,
+    cssCodeSplit: false, // 插件模式下可以关闭拆分
     rollupOptions: {
-      // 不打包进库
       external: ['vue'],
       output: {
         globals: {
@@ -32,4 +32,4 @@ export default defineConfig({
       }
     }
   }
-})
+})