定制主题

9/7/2022

# 一、背景与问题

我们知道任何的 UI框架只是提供了一种最基础的颜色、布局、样式等风格,但是对于某些特定的行业、特定的领域,都需要有行业属性的定制,那么,在SmartAdmin中是如何解决的呢?

# 二、定制

具体在 src/theme 目录中做了样式定制

# 2.1 smart-admin.less 文件

在这个文件中,我们定义了属于 SmartAdmin自己的样式,这些样式有个特定,均已smart 开头,这样可以很好的进行区分自己本项目的样式 还是 其他的样式。举例如下:

/******************************** 查询表格样式 ********************************/
.smart-query-form {
  background-color: #ffffff;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.smart-table-operate {
  .ant-btn {
    padding: 0px 3px !important;
  }
}

.smart-table-column-operate {
  float: right;
}

.smart-query-form-row:not(:first-child) {
  margin-top: 8px;
}
...
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 2.1 index.less 文件

这个是所有样式的入口文件,同时因为了 所有 ant design vue 的样式文件,并没有做按需导入,以及全局 样式变量的定义。

@import 'ant-design-vue/dist/antd.css';
@import './smart-admin.less';
/**********************************  页面头部 begin **********************************/
@hover-bg-color: rgba(0, 0, 0, 0.025);
@hover-bg-color-night: rgba(255, 255, 255, 0.025);
@header-light-bg-hover-color: #f6f6f6;
@header-height: 80px;
@header-user-height: 40px;
@page-tag-height: 40px;
@theme-list: light, dark, night;
....
....
1
2
3
4
5
6
7
8
9
10
11
12

# 为什么没有按需导入?

仔细看第一行@import 'ant-design-vue/dist/antd.css';,我们导入了 ant-design-vue全部样式,且为css文件;

  • 因为SmartAdmin 是中后台,且一定是电脑端操作,网速、硬件都会很好,所以按需导入就显得价值不大了
  • 因为SmartAdmin 是中后台,页面很多且复杂,几乎会用到所有的 ant-design-vue组件,所以按需意义也不大了

# 为什么导入css

请先注意如下代码的区别:

@import '~ant-design-vue/dist/antd.less';
@import 'ant-design-vue/dist/antd.css';
1
2

一个是导入css,另一个是导入less;SmartAdmin用的是css!

  • 选择导入css,这样vite3启动速度很快,因为不用解析和编译less;
  • 选择导入less,这样vite3启动第一次很慢,以后会很快,因为需要解析大量的less变量;除非从/dist/antd.less中抽丝剥茧,只导入某些less变量;
  • 如果必须导入less,vite有没有方法变得第一次启动快? 尤大已经回复过了,无解,因为 less都需要提前编译,即使webpack也需要提前编译less,所以启动速度 取决于你 导入了 多少less;

以上,懂了吗?


# 联系我们

1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(河南·洛阳) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目。

加 主任 “卓大” 微信
拉你入群,一起学习
关注 “小镇程序员”
分享代码与生活、技术与赚钱
请 “1024创新实验室” 喝咖啡
支持我们的开源与分享

告白气球 (钢琴版)
JESSE T