针对低版本node(＞14.18.0)，实现element-plus组件的自动导入和自定义主题色（亲测可用）

前言
基于vue3+element-plus的项目，一般都会选择按需导入element-plus组件，项目里都需要安装这两个插件：unplugin-vue-components，unplugin-auto-import，然而实际安装后坑会遇到一些兼容性问题，一般都是由于node版本与安装的这2个插件版本不兼容导致的，本文针对node版本在为14.18.x时实现的组件的自动导入和自定义主题色做了简述

安装插件：

npm i unplugin-auto-import@0.9.0 unplugin-vue-components@0.19.0  -D

vue.config.js相关配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 其他配置...
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  },
})

自定义主题色配置

安装sass

npm i sass@1.32.7 sass-loader@12.0.0 -D

自定义主题色样式文件theme.scss

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': 你的主题色
    ),
  )
);

@use "element-plus/theme-chalk/src/index.scss" as *;

自定义主题色相关vue.config.js相关配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 其他配置...
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@use "实际路径/theme.scss" as *;'
      }
    }
  }
})

更多问题的探讨，请加入vue技术交流群（864583465) (此群满可加2群：111822407），你的问答将是我们大家共同进步的关键！！！