@cimom/vben-styles
v5.6.3
Published
用于多个 `app` 公用的样式文件，继承了 `@cimom/vben-core-design` 的所有能力。业务上有通用的样式文件可以放在这里。
Readme
@cimom/vben-styles
用于多个 app 公用的样式文件，继承了 @cimom/vben-core-design 的所有能力。业务上有通用的样式文件可以放在这里。
安装
# 进入目标应用目录，例如 apps/xxxx-app
# cd apps/xxxx-app
pnpm add @cimom/vben-styles基本使用
全局引入
在应用的入口文件中引入样式：
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
// 引入全局样式
import '@cimom/vben-styles';
const app = createApp(App);
app.mount('#app');引入特定样式
如果只需要引入特定的样式，可以直接引入相应的子模块：
// 引入 Ant Design Vue 的样式重置
@import '@cimom/vben-styles/src/antd/index.css';
// 引入全局样式
@import '@cimom/vben-styles/src/global/index.scss';样式模块
Ant Design Vue 样式重置
该包提供了对 Ant Design Vue 组件库的样式重置，以便更好地适配项目的设计风格。
/* ant-design-vue 组件库的一些样式重置 */
.ant-app {
width: 100%;
height: 100%;
overscroll-behavior: none;
color: inherit;
}
.ant-btn {
.anticon {
display: inline-flex;
}
/* * 修复按钮添加图标时的位置问题 */
> svg {
display: inline-block;
}
> svg + span {
margin-inline-start: 6px;
}
}
/* 更多重置样式... */全局样式
全局样式模块包含了项目中通用的样式定义，如布局、按钮、表单等。
// 使用 BEM 命名规范
@use '@cimom/vben-core-design/bem' as *;
// 使用示例
.#{$namespace}-button {
// 按钮样式
}
.#{$namespace}-form {
// 表单样式
}Element Plus 样式重置
如果项目使用了 Element Plus 组件库，该包也提供了对应的样式重置。
// 引入 Element Plus 的样式重置
@import '@cimom/vben-styles/src/ele/index.css';Naive UI 样式重置
如果项目使用了 Naive UI 组件库，该包也提供了对应的样式重置。
// 引入 Naive UI 的样式重置
@import '@cimom/vben-styles/src/naive/index.css';与核心设计系统的集成
该包集成了 @cimom/vben-core-design 核心设计系统，包含了下列功能：
主题变量
核心设计系统提供了一组主题变量，可以在项目中使用：
// 使用主题变量
.custom-element {
color: var(--primary-color);
background-color: var(--background-color);
border: 1px solid var(--border-color);
}暗色模式支持
核心设计系统支持暗色模式，可以通过添加 .dark 类名到 html 或 body 元素来启用：
<html class="dark">
<!-- 暗色模式下的内容 -->
</html>响应式设计
核心设计系统提供了响应式断点变量，可以在项目中使用：
// 使用响应式断点
@media (max-width: var(--breakpoint-md)) {
.responsive-element {
font-size: 14px;
}
}自定义扩展
如果需要扩展或覆盖现有的样式，可以在项目中创建自定义样式文件：
// src/styles/custom.scss
// 先引入核心样式
@import '@cimom/vben-styles';
// 然后添加自定义样式
.custom-component {
// 自定义样式
}
// 覆盖现有组件的样式
.ant-btn {
// 自定义按钮样式
}使用技巧
与 Tailwind CSS 集成
如果项目使用了 Tailwind CSS，可以将核心设计系统的变量集成到 Tailwind 配置中：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: 'var(--primary-color)',
secondary: 'var(--secondary-color)',
// 更多颜色...
},
// 其他扩展...
},
},
// 其他配置...
};与 CSS Modules 使用
如果项目使用了 CSS Modules，可以在组件中引入样式变量：
// Component.module.scss
@import '@cimom/vben-styles/src/global/index.scss';
.component {
color: var(--primary-color);
// 更多样式...
}<template>
<div :class="$style.component">
<!-- 组件内容 -->
</div>
</template>
<script setup>
import styles from './Component.module.scss';
</script>注意事项
- 该包主要用于共享样式和设计系统，不包含具体的组件实现。
- 引入该包会自动引入
@cimom/vben-core-design核心设计系统。 - 如果需要修改样式变量，建议在项目中创建自定义样式文件而不是直接修改该包的源代码。