From 5e395ccae408e1bc080228e8a40e3524e898a47a Mon Sep 17 00:00:00 2001 From: tobegold574 <2386340403@qq.com> Date: Mon, 17 Nov 2025 13:37:35 +0800 Subject: [PATCH] =?UTF-8?q?fix(CSS):=20=E4=BF=AE=E5=A4=8DUI=E7=BB=84?= =?UTF-8?q?=E4=BB=B6CSS=E7=B1=BB=E4=B8=BA=E7=A9=BA=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 库模式默认JS与CSS独立，引入插件合并 - 修改variables文件名为_variables - 删除所有scoped，更遵循库开发规范 BREAKING CHANGES: 2.0.0->2.1.0 --- README.md | 6 ++++++ package.json | 3 ++- pnpm-lock.yaml | 12 +++++++++++ src/components/Avatar/index.vue | 2 +- src/components/Button/index.vue | 2 +- src/components/ChatBubble/index.vue | 2 +- src/components/Container/index.vue | 2 +- src/components/Divider/index.vue | 2 +- src/components/Empty/index.vue | 2 +- src/components/Grid/index.vue | 2 +- src/components/Icon/index.vue | 2 +- src/components/Image/index.vue | 2 +- src/components/Loading/index.vue | 2 +- src/components/Message/index.vue | 2 +- src/components/Notification/index.vue | 2 +- src/components/Result/index.vue | 2 +- src/components/Space/index.vue | 2 +- src/components/Tag/index.vue | 2 +- src/components/Text/index.vue | 2 +- src/index.ts | 21 +++++++++++++++++++ .../{variables.scss => _variables.scss} | 0 src/styles/index.scss | 4 ++-- vite.config.ts | 14 ++++++------- 23 files changed, 66 insertions(+), 26 deletions(-) rename src/styles/{variables.scss => _variables.scss} (100%) diff --git a/README.md b/README.md index 9642cea..9d5a2de 100644 --- a/README.md +++ b/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文件合并 + diff --git a/package.json b/package.json index 82befc3..f31cd6f 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bc96473..ec00663 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/components/Avatar/index.vue b/src/components/Avatar/index.vue index 0c6c045..7e9bef1 100644 --- a/src/components/Avatar/index.vue +++ b/src/components/Avatar/index.vue @@ -116,6 +116,6 @@ export default defineComponent({ }); - diff --git a/src/components/Button/index.vue b/src/components/Button/index.vue index 8f8d788..ed03f24 100644 --- a/src/components/Button/index.vue +++ b/src/components/Button/index.vue @@ -109,6 +109,6 @@ export default defineComponent({ }); - diff --git a/src/components/ChatBubble/index.vue b/src/components/ChatBubble/index.vue index 0c1c55e..8ee8f8a 100644 --- a/src/components/ChatBubble/index.vue +++ b/src/components/ChatBubble/index.vue @@ -198,6 +198,6 @@ export default defineComponent({ }); - diff --git a/src/components/Container/index.vue b/src/components/Container/index.vue index 06c58e5..6887e4f 100644 --- a/src/components/Container/index.vue +++ b/src/components/Container/index.vue @@ -130,6 +130,6 @@ export default defineComponent({ }); - diff --git a/src/components/Divider/index.vue b/src/components/Divider/index.vue index 6adae00..e4f0250 100644 --- a/src/components/Divider/index.vue +++ b/src/components/Divider/index.vue @@ -98,6 +98,6 @@ export default defineComponent({ }); - diff --git a/src/components/Empty/index.vue b/src/components/Empty/index.vue index 23e896d..a977700 100644 --- a/src/components/Empty/index.vue +++ b/src/components/Empty/index.vue @@ -74,6 +74,6 @@ export default defineComponent({ }); - diff --git a/src/components/Grid/index.vue b/src/components/Grid/index.vue index 8925620..a905e77 100644 --- a/src/components/Grid/index.vue +++ b/src/components/Grid/index.vue @@ -129,6 +129,6 @@ export default defineComponent({ }); - diff --git a/src/components/Icon/index.vue b/src/components/Icon/index.vue index 028e501..396bcff 100644 --- a/src/components/Icon/index.vue +++ b/src/components/Icon/index.vue @@ -181,6 +181,6 @@ export default defineComponent({ }); - diff --git a/src/components/Image/index.vue b/src/components/Image/index.vue index 4f5360e..95243b0 100644 --- a/src/components/Image/index.vue +++ b/src/components/Image/index.vue @@ -200,6 +200,6 @@ export default defineComponent({ }); - diff --git a/src/components/Loading/index.vue b/src/components/Loading/index.vue index cb12edc..62f68ce 100644 --- a/src/components/Loading/index.vue +++ b/src/components/Loading/index.vue @@ -108,6 +108,6 @@ export default defineComponent({ }); - diff --git a/src/components/Message/index.vue b/src/components/Message/index.vue index cbded1f..5ecd404 100644 --- a/src/components/Message/index.vue +++ b/src/components/Message/index.vue @@ -189,6 +189,6 @@ export default defineComponent({ }); - diff --git a/src/components/Notification/index.vue b/src/components/Notification/index.vue index d5bffe0..7530997 100644 --- a/src/components/Notification/index.vue +++ b/src/components/Notification/index.vue @@ -225,6 +225,6 @@ export default defineComponent({ }); - diff --git a/src/components/Result/index.vue b/src/components/Result/index.vue index a4b7777..66fb879 100644 --- a/src/components/Result/index.vue +++ b/src/components/Result/index.vue @@ -125,6 +125,6 @@ export default defineComponent({ }); - diff --git a/src/components/Space/index.vue b/src/components/Space/index.vue index a327bee..df6a750 100644 --- a/src/components/Space/index.vue +++ b/src/components/Space/index.vue @@ -90,6 +90,6 @@ export default defineComponent({ }); - diff --git a/src/components/Tag/index.vue b/src/components/Tag/index.vue index 99c6464..ddd9850 100644 --- a/src/components/Tag/index.vue +++ b/src/components/Tag/index.vue @@ -118,6 +118,6 @@ export default defineComponent({ }); - diff --git a/src/components/Text/index.vue b/src/components/Text/index.vue index f5641de..0c9db27 100644 --- a/src/components/Text/index.vue +++ b/src/components/Text/index.vue @@ -116,6 +116,6 @@ export default defineComponent({ }); - diff --git a/src/index.ts b/src/index.ts index 467122f..25ccb1c 100644 --- a/src/index.ts +++ b/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 = [ // 基础视觉系统组件（保留） diff --git a/src/styles/variables.scss b/src/styles/_variables.scss similarity index 100% rename from src/styles/variables.scss rename to src/styles/_variables.scss diff --git a/src/styles/index.scss b/src/styles/index.scss index 980b7d1..1dfb339 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,8 +1,8 @@ // KnowAI UI组件库基础样式 // 引入SCSS变量系统 -@forward './variables.scss'; -@use './variables.scss' as *; +@forward './_variables.scss'; +@use './_variables.scss' as *; // 重置样式 *, diff --git a/vite.config.ts b/vite.config.ts index 96fa794..d00354d 100644 --- a/vite.config.ts +++ b/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: [vue()], - // 路径别名 + plugins: [ + 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({ } } } -}) \ No newline at end of file +})