一、背景与问题

知道任何的 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;
}
...
...

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;
....
....

为什么没有按需导入？

仔细看第一行@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';

一个是导入css，另一个是导入less；SmartAdmin用的是css！

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

以上，懂了吗？