组件库中如何抽离公共样式

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

搭建自己的组件库，写到如何搭建一个组件库，随着组件库中的组件越来越多，组件的一些重复样式，比如字体大小，字体颜色等主题风格类的样式需要抽离出来，减小打包体积。抽离出来的样式放在上次我们建好的theme-chalk工程中，专门管理一些公共样式。

1 目录创建

在src下创建如下目录：

• index.scss是工程的入口文件，用来导出所有组件的样式
• config.scss用来配置一些变量
• mixins.scss混合样式
• form.scss是之前封装好的一个组件的样式文件

2 文件配置

2.1 packages\theme-chalk\src\mixins\config.scss

配置一些变量，$namespace就是我们组件的命名空间的前缀，比如组件的类名的前缀是“z”，在样式文件form.scss中就可以用变量$namespace代替具体的前缀，便于后期维护。

//packages\theme-chalk\src\mixins\config.scss
//配置类名前缀为“z”
$namespace: 'z'

2.2 packages\theme-chalk\src\mixins\mixins.scss

//packages\theme-chalk\src\mixins\mixins.scss
@use 'config' as * ; // 可以直接使用config里的变量，相当于直接把config文件内容拷贝过来
@forward 'config'; // 引入另一个模块的所有变量

2.3 packages\theme-chalk\src\form.scss

随便写点样式，测试一下

// packages\theme-chalk\src\form.scss
@use './mixins/mixins.scss' as *;

//随便写点样式，给类名为“z-form”添加背景颜色
.#{$namespace}-form {
  background: yellow;
}

2.4 packages\theme-chalk\src\index.scss

将form组件的样式导出

// packages\theme-chalk\src\index.scss
@use 'form.scss'

检测样式是否生效

在play\main.ts中引入组件的样式：

//play\main.ts
import { createApp } from "vue"
import App from "./app.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"

//引入组件
import VForm from "@vue3-components/components/v-form"
//引入组件样式
import "@vue3-components/theme-chalk/src/index.scss"

const app = createApp(App)
app.use(ElementPlus)
//全局注册组件
app.use(VForm)
app.mount("#app")

在组件源码中给组件加上类名"z-form",然后使用组件，验证样式是否生效。

使用组件：

//play\app.vue
<template>
  <div>测试</div>
  <v-form :elements="forms" @search="search"></v-form>
</template>
<script lang="ts" setup>
const forms = [
  {
    label: "角色标识",
    prop: "roleCode",
    placeholder: "角色标识",
  },
  {
    label: "角色名称",
    prop: "roleName",
    placeholder: "分组名称",
  },
  {
    label: "产品",
    prop: "productCode",
    placeholder: "产品",
    type: "select",
    optionGroup: true,
    options: [],
    style: "width:100%;",
  },
  {
    label: "创建时间",
    prop: "create_at_start,create_at_end",
    type: "datetimerange",
    defaultValue: [],
    startPlaceholder: "选择开始时间",
    endPlaceholder: "选择结束时间",
    valueFormat: "yyyy-MM-dd HH:mm:ss",
    layout: {
      lg: {
        span: 8,
      },
      md: {
        span: 12,
      },
      sm: {
        span: 24,
      },
      xs: {
        span: 24,
      },
    },
  },
]

const search = (params) => {
  console.log(params)
}
</script>

然后启动工程，在页面中看样式是否生效。接下来需要对业务组件库进行打包，打包后就可以发布组件库，在其他项目中安装使用了。