element-ui(plus) 按需加载和自定义主题

这里以element-plus为例，element-ui同理

我这里使用的是element-plus官网中自定义主题的第二种 - 在项目中改变 SCSS 变量

按需引入组件可查看官网

基本上按着官网的教程走就可以实现
我这里贴上我的代码

// babel.config.js 修改后记得重启项目
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-plus",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

import "dayjs/locale/zh-cn";
import locale from "element-plus/lib/locale";
import lang from "element-plus/lib/locale/lang/zh-cn";
import {
  // ElAlert,
  // ElAside,
  // ElAutocomplete,
  // ElAvatar,
  // ElBacktop,
  // ElBadge,
  // ElBreadcrumb,
  // ElBreadcrumbItem,
  ElButton,
  // ElButtonGroup,
  // ElCalendar,
  // ElCard,
  // ElCarousel,
  // ElCarouselItem,
  // ElCascader,
  // ElCascaderPanel,
  // ElCheckbox,
  // ElCheckboxButton,
  // ElCheckboxGroup,
  ElCol,
  // ElCollapse,
  // ElCollapseItem,
  ElCollapseTransition,
  // ElColorPicker,
  // ElContainer,
  ElDatePicker,
  ElDialog,
  // ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  // ElFooter,
  ElForm,
  ElFormItem,
  // ElHeader,
  ElIcon,
  ElImage,
  ElInput,
  // ElInputNumber,
  // ElLink,
  // ElMain,
  // ElMenu,
  // ElMenuItem,
  // ElMenuItemGroup,
  ElOption,
  // ElOptionGroup,
  // ElPageHeader,
  ElPagination,
  ElPopconfirm,
  // ElPopover,
  // ElPopper,
  // ElProgress,
  // ElRadio,
  // ElRadioButton,
  // ElRadioGroup,
  // ElRate,
  ElRow,
  ElScrollbar,
  ElSelect,
  // ElSlider,
  // ElStep,
  // ElSteps,
  // ElSubmenu,
  ElSwitch,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElTabs,
  ElTag,
  // ElTimePicker,
  ElTimeSelect,
  // ElTimeline,
  // ElTimelineItem,
  ElTooltip,
  ElTransfer,
  // ElTree,
  // ElUpload,
  ElInfiniteScroll,
  ElLoading,
  ElMessage
  // ElMessageBox,
  // ElNotification,
} from "element-plus";

const components = [
  // ElAlert,
  // ElAside,
  // ElAutocomplete,
  // ElAvatar,
  // ElBacktop,
  // ElBadge,
  // ElBreadcrumb,
  // ElBreadcrumbItem,
  ElButton,
  // ElButtonGroup,
  // ElCalendar,
  // ElCard,
  // ElCarousel,
  // ElCarouselItem,
  // ElCascader,
  // ElCascaderPanel,
  // ElCheckbox,
  // ElCheckboxButton,
  // ElCheckboxGroup,
  ElCol,
  // ElCollapse,
  // ElCollapseItem,
  ElCollapseTransition,
  // ElColorPicker,
  // ElContainer,
  ElDatePicker,
  ElDialog,
  // ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  // ElFooter,
  ElForm,
  ElFormItem,
  // ElHeader,
  ElIcon,
  ElImage,
  ElInput,
  // ElInputNumber,
  // ElLink,
  // ElMain,
  // ElMenu,
  // ElMenuItem,
  // ElMenuItemGroup,
  ElOption,
  // ElOptionGroup,
  // ElPageHeader,
  ElPagination,
  ElPopconfirm,
  // ElPopover,
  // ElPopper,
  // ElProgress,
  // ElRadio,
  // ElRadioButton,
  // ElRadioGroup,
  // ElRate,
  ElRow,
  ElScrollbar,
  ElSelect,
  // ElSlider,
  // ElStep,
  // ElSteps,
  // ElSubmenu,
  ElSwitch,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElTabs,
  ElTag,
  // ElTimePicker,
  ElTimeSelect,
  // ElTimeline,
  // ElTimelineItem,
  ElTooltip,
  ElTransfer
  // ElTree,
  // ElUpload,
];

const plugins = [
  ElInfiniteScroll,
  ElLoading,
  ElMessage
  // ElMessageBox,
  // ElNotification,
];
import "../style/element-variables.scss"

export default (app: any) => {
  // app.config.globalProperties.$ELEMENT = { locale };
  // 可以查看文档
  locale.use(lang);
  components.forEach(component => {
    app.component(component.name, component);
  });

  plugins.forEach(plugin => {
    app.use(plugin);
  });
};

/* theme color */
// $--color-primary: #1890ff;
$--color-primary: #5291FF;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;

$--button-font-weight: 400;

// $--color-text-regular: #1f2d3d;

$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;

$--table-border: 1px solid#dfe6ec;

/* icon font path, required */
$--font-path: '~element-plus/lib/theme-chalk/fonts';

// 引入后 包会很大
// 全局引入
// @import "~element-plus/packages/theme-chalk/src/index";

// 按需引入  部分scss文件没有用到对应的变量可以不引用
@import "~element-plus/packages/theme-chalk/src/button";
@import "~element-plus/packages/theme-chalk/src/col";
@import "~element-plus/packages/theme-chalk/src/collapse-transition";
@import "~element-plus/packages/theme-chalk/src/date-picker";
@import "~element-plus/packages/theme-chalk/src/dialog";
@import "~element-plus/packages/theme-chalk/src/drawer";
@import "~element-plus/packages/theme-chalk/src/dropdown";
@import "~element-plus/packages/theme-chalk/src/dropdown-menu";
@import "~element-plus/packages/theme-chalk/src/dropdown-item";
@import "~element-plus/packages/theme-chalk/src/form";
@import "~element-plus/packages/theme-chalk/src/form-item";
@import "~element-plus/packages/theme-chalk/src/icon";
@import "~element-plus/packages/theme-chalk/src/image";
@import "~element-plus/packages/theme-chalk/src/input";
@import "~element-plus/packages/theme-chalk/src/option";
@import "~element-plus/packages/theme-chalk/src/pagination";
@import "~element-plus/packages/theme-chalk/src/popconfirm";
@import "~element-plus/packages/theme-chalk/src/row";
@import "~element-plus/packages/theme-chalk/src/scrollbar";
@import "~element-plus/packages/theme-chalk/src/select";
@import "~element-plus/packages/theme-chalk/src/switch";
@import "~element-plus/packages/theme-chalk/src/tab-pane";
@import "~element-plus/packages/theme-chalk/src/table";
@import "~element-plus/packages/theme-chalk/src/table-column";
@import "~element-plus/packages/theme-chalk/src/tabs";
@import "~element-plus/packages/theme-chalk/src/tag";
@import "~element-plus/packages/theme-chalk/src/time-select";
@import "~element-plus/packages/theme-chalk/src/tooltip";
@import "~element-plus/packages/theme-chalk/src/transfer";
@import "~element-plus/packages/theme-chalk/src/infinite-scroll";
@import "~element-plus/packages/theme-chalk/src/loading";
@import "~element-plus/packages/theme-chalk/src/message";

css也可以按需引入，但是element的theme-chalk也引入了，目前还没找到相应的方法

// main.ts
import element from "./plugins/element-plus";
const app = createApp(App);
element(app);