使用自动化脚本实现旧主题变量的快速替换
整改背景：由于 tiny-vue 要对接主题化配置系统，tiny-vue 组件库在 3.5.0 版本之后，自定义变量的名称发生了变化;
例如：--ti-base-color-selected-font-color 已整改为--ti-base-color-selected-text-color； --ti-alert-radius 已整改为 --ti-alert-border-radius;
如果项目中使用了旧的 css 变量来调整样式，那么升级为 tiny-vue 新版本可能会无法生效，所以给出以下批量替换变量名的方法，解决新旧变量替换问题；使用步骤如下：
以替换项目中src目录下所有的旧变量名为例： 实现新旧变量名的替换
步骤一、点击下载新旧变量的映射表newVars.json和替换脚本replaceVar.js
<script setup>
import { pubUrl } from '@/tools'
</script>
newVars.json 文件 和 replaceVar.js 文件
步骤二、将 newVars.json 和 replaceVar.js 放到项目根目录下，与 src 目录同级；
步骤三、在项目根目录下，执行以下命令进行替换；
node replaceVar.js
特殊情况：需手动替换的情况，如何查看哪些变量需要手动替换，细心往下看；
手动替换的背景：在映射表 newVars.json 中，key 是旧变量，value 是新变量；如果使用了类似于--ti-button-padding的旧变量，比较特殊，称为特殊变量；因为其拆分成了两个或以上的新变量，所以对应的 value 是一个数组，这种情况脚本无法自动化替换，需要自己手动替换；如何替换？
步骤一、取消 replaceVar.js 文件第 20 行注释，再重复以上步骤三；即可知道哪些地方的变量需要手动替换（末尾有附上特殊变量表）
// console.log('需要手动替换的文件路径是', statPath, '需要手动替换的变量是', key)步骤二、根据打印的文件路径和变量，找到变量进行修改，大致有以下几种例子，可以覆盖所有需要手动替换的情况：
普通情况：
例 1：查特殊变量表可知：类似于--ti-button-padding的旧变量拆分成了2个新变量，--ti-button-padding-vertical 和 --ti-button-padding-horizontal，按字面意思，分别为垂直方向和水平方向的 padding
若项目原来的样式是：padding: var(--ti-button-padding);需手动替换成：padding: var(--ti-button-padding-vertical) var(--ti-button-padding-horizontal);
例 2：类似于--ti-pager-primary-color的旧变量拆分成了3个新变量，--ti-pager-primary-bg-color、--ti-pager-primary-text-color和--ti-pager-primary-border-color ，按字面意思，分别为背景颜色、文本颜色和边框颜色
若原来的样式是：--ti-pager-primary-color：red;需手动替换成：--ti-pager-primary-bg-color： red; --ti-pager-primary-text-color: red; --ti-pager-primary-border-color: red;
特殊情况：
例 3：查特殊变量表可知: 类似于：含有border字段的旧变量，如果拆分成的新变量分别包含：border-weight（边框厚度）,border-style（边框样式）,border-color（边框颜色），比如--ti-tabs-item-active-border拆成--ti-tabs-item-active-border-weight，--ti-tabs-item-active-border-style，--ti-tabs-item-active-border-color;
若原来的样式是--ti-tabs-item-active-border: 1px solid red;需手动替换成：--ti-tabs-item-active-border-weight: 1px; --ti-tabs-item-active-border-style: solid; --ti-tabs-item-active-border-color: red;
例 4：类似于--ti-radio-button-checked-hover-color拆分成的变量中有包含box-shadow字段的，需要单独写box-shadow样式。
若原来的样式是：--ti-radio-button-checked-hover-color：red需手动替换成：--ti-radio-button-checked-hover-bg-color：red; --ti-radio-button-checked-hover-border-color: red; --ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 red(box-shadow 的值像正常写样式一样，可以自定义)；
最后附上特殊变量的映射表，newVars.json 里的特殊变量共有 48 个，如下所示；
{
"--ti-button-padding": ["--ti-button-padding-vertical", "--ti-button-padding-horizontal"],
"--ti-carousel-indicator-padding": [
"--ti-carousel-indicator-padding-vertical",
"--ti-carousel-indicator-padding-horizontal"
],
"--ti-cascader-menu-list-padding": [
"--ti-cascader-menu-list-padding-vertical",
"--ti-cascader-menu-list-padding-horizontal"
],
"--ti-cascader-node-disabled-color": [
"--ti-cascader-node-disabled-text-color",
"--ti-cascader-node-disabled-bg-color"
],
"--ti-cascader-node-label-padding": [
"--ti-cascader-node-label-padding-vertical",
"--ti-cascader-node-label-padding-horizontal"
],
"--ti-cascader-panel-node-label-padding": [
"--ti-cascader-panel-node-label-padding-vertical",
"--ti-cascader-panel-node-label-padding-right",
"--ti-cascader-panel-node-label-padding-vertical",
"--ti-cascader-panel-node-label-padding-left"
],
"--ti-collapse-item-header-padding": [
"--ti-collapse-item-header-padding-vertical",
"--ti-collapse-item-header-padding-horizontal"
],
"--ti-dialogbox-head-padding": [
"--ti-dialogbox-head-padding-top",
"--ti-dialogbox-head-padding-horizontal",
"--ti-dialogbox-head-padding-bottom"
],
"--ti-dialogbox-box-body-padding": [
"--ti-dialogbox-box-body-padding-vertical",
"--ti-dialogbox-box-body-padding-horizontal"
],
"--ti-dropdown-menu-item-padding": [
"--ti-dropdown-menu-item-padding-vertical",
"--ti-dropdown-menu-item-padding-horizontal"
],
"--ti-dropdown-menu-padding": ["--ti-dropdown-menu-padding-vertical", "--ti-dropdown-menu-padding-horizontal"],
"--ti-fallmenu-slot-color": ["--ti-fallmenu-slot-text-color", "--ti-fallmenu-slot-bg-color"],
"--ti-form-item-error-color": ["--ti-form-item-error-text-color", "--ti-form-item-error-border-color"],
"--ti-table-td-padding": ["--ti-table-td-padding-vertical", "--ti-table-td-padding-horizontal"],
"--ti-milestone-color": ["--ti-milestone-text-color", "--ti-milestone-bg-color"],
"--ti-modal-header-padding": [
"--ti-modal-header-padding-top",
"--ti-modal-header-padding-horizontal",
"--ti-modal-header-padding-bottom"
],
"--ti-modal-body-padding": [
"--ti-modal-body-padding-top",
"--ti-modal-body-padding-horizontal",
"--ti-modal-body-padding-bottom"
],
"--ti-modal-footer-padding": [
"--ti-modal-footer-padding-top",
"--ti-modal-footer-padding-horizontal",
"--ti-modal-footer-padding-bottom"
],
"--ti-notify-info-background": ["--ti-notify-info-bg-color", "--ti-notify-bg-color"],
"--ti-notify-title-margin": [
"--ti-notify-title-margin-top",
"--ti-notify-title-margin-horizontal",
"--ti-notify-title-margin-bottom"
],
"--ti-notify-message-margin": [
"--ti-notify-message-margin-vertical",
"--ti-notify-message-margin-right",
"--ti-notify-message-margin-vertical",
"--ti-notify-message-margin-left"
],
"--ti-pager-primary-color": [
"--ti-pager-primary-bg-color",
"--ti-pager-primary-text-color",
"--ti-pager-primary-border-color"
],
"--ti-pager-list-padding": ["--ti-pager-poplist-item-padding-vertical", "--ti-pager-poplist-item-padding-horizontal"],
"--ti-date-table-td-padding": ["--ti-date-table-td-padding-vertical", "--ti-date-table-td-padding-horizontal"],
"--ti-time-panel-btn-padding": ["--ti-time-panel-btn-padding-vertical", "--ti-time-panel-btn-padding-horizontal"],
"--ti-popover-placement-margin": [
"--ti-popover-placement-margin-vertical",
"--ti-popover-placement-margin-horizontal"
],
"--ti-popover-padding": ["--ti-popover-padding-vertical", "--ti-popover-padding-horizontal"],
"--ti-radio-input-checked-disabled-color": [
"--ti-radio-input-checked-disabled-bg-color",
"--ti-radio-input-checked-disabled-border-color"
],
"--ti-radio-button-checked-normal-color": [
"--ti-radio-button-checked-normal-bg-color",
"--ti-radio-button-checked-normal-border-color",
"--ti-radio-button-checked-normal-box-shadow"
],
"--ti-radio-button-checked-hover-color": [
"--ti-radio-button-checked-hover-bg-color",
"--ti-radio-button-checked-hover-border-color",
"--ti-radio-button-checked-hover-box-shadow"
],
"--ti-search-inputinner-height": ["--ti-search-input-btn-width", "--ti-search-input-btn-line-height"],
"--ti-select-dropdown-list-padding": [
"--ti-select-dropdown-list-padding-top",
"--ti-select-dropdown-list-padding-horizontal",
"--ti-select-dropdown-list-padding-bottom"
],
"--ti-select-dropdown-item-padding": [
"--ti-select-dropdown-item-padding-vertical",
"--ti-select-dropdown-item-padding-horizontal"
],
"--ti-select-dropdown-line-margin": [
"--ti-select-dropdown-line-margin-vertical",
"--ti-select-dropdown-line-margin-horizontal"
],
"--ti-slider-progress-box-middleline-normal": [
"--ti-slider-progress-box-middleline-border-color",
"--ti-slider-progress-box-middleline-icon-color"
],
"--ti-slider-handle-color-hover": ["--ti-slider-handle-text-color-hover", "--ti-slider-handle-border-color-hover"],
"--ti-slider-handle-margin": [
"--ti-slider-handle-margin-top",
"--ti-slider-handle-margin-horizontal",
"--ti-slider-handle-margin-bottom"
],
"--ti-slider-tips-bgcolor": ["--ti-slider-tips-bg-color", "--ti-slider-tips-border-color"],
"--ti-slider-vertical-margin": [
"--ti-slider-margin-vertical",
"--ti-slider-margin-right",
"--ti-slider-margin-vertical",
"--ti-slider-margin-left"
],
"--ti-split-trigger-size": [
"--ti-split-trigger-size",
"--ti-split-trigger-bar-margin-left",
"--ti-split-trigger-bar-margin-top"
],
"--ti-switch-checked-disabled-bgcolor": [
"--ti-switch-checked-disabled-bg-color",
"--ti-switch-checked-disabled-border-color"
],
"--ti-switch-dot-size": ["--ti-switch-dot-size-height-width", "--ti-switch-dot-position-left"],
"--ti-tabs-item-active-border": [
"--ti-tabs-item-active-border-weight",
"--ti-tabs-item-active-border-style",
"--ti-tabs-item-active-border-color"
],
"--ti-tabs-item-border-bottom": [
"--ti-tabs-item-bottom-border-weight",
"--ti-tabs-item-bottom-border-style",
"--ti-tabs-item-bottom-border-color"
],
"--ti-tabs-icon-close-margin": [
"--ti-tabs-icon-close-margin-vertical",
"--ti-tabs-icon-close-margin-right",
"--ti-tabs-icon-close-margin-left"
],
"--ti-tooltip-padding": ["--ti-tooltip-padding-vertical", "--ti-tooltip-padding-horizontal"],
"--ti-upload-list-picture-card-item-bgcolor": [
"--ti-upload-list-picture-card-item-bg-color",
"--ti-upload-list-picture-card-item-text-color"
],
"--ti-user-account-padding": ["--ti-user-account-padding-vertical", "--ti-user-account-padding-horizontal"]
}