tobegold574/knowai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

BREAKING CHANGES: 2.0.0->2.1.0
This commit is contained in:
tobegold574
2025-11-17 13:37:35 +08:00
parent 3473009b28
commit 5e395ccae4
23 changed files with 66 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -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文件合并

3
package.json
View File

@@ -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",

12
pnpm-lock.yaml generated
View File

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

2
src/components/Avatar/index.vue
View File

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

2
src/components/Button/index.vue
View File

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

2
src/components/ChatBubble/index.vue
View File

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

2
src/components/Container/index.vue
View File

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

2
src/components/Divider/index.vue
View File

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

2
src/components/Empty/index.vue
View File

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

2
src/components/Grid/index.vue
View File

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

2
src/components/Icon/index.vue
View File

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

2
src/components/Image/index.vue
View File

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

2
src/components/Loading/index.vue
View File

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

2
src/components/Message/index.vue
View File

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

2
src/components/Notification/index.vue
View File

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

2
src/components/Result/index.vue
View File

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

2
src/components/Space/index.vue
View File

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

2
src/components/Tag/index.vue
View File

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

2
src/components/Text/index.vue
View File

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

21
src/index.ts
View File

@@ -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 = [
// 基础视觉系统组件（保留）

0
src/styles/variables.scss → src/styles/_variables.scss
View File

4
src/styles/index.scss
View File

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

14
vite.config.ts
View File

@@ -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({
}
}
}
})
})