使用Element plus 黑暗模式，按需引入覆盖样式的scss文件报错的解决办法

// vite.config.ts

    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
    css: {
      preprocessorOptions: {
        // 全局引入了 scss 的文件
        scss: {
          additionalData: `
              @use "@/styles/element/theme-light.scss";
              @use "@/styles/element/theme-dark.scss";
        `,
        },
      },
    },

注意按官方的办法后面是带有 as *的，这里去掉，不然会报scss全局样式冲突

// light.scss

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #007d7b,
    ),
    "success": (
      "base": #8bc34a,
    ),
    "warning": (
      "base": #ffc107,
    ),
    "danger": (
      "base": #f56c6c,
    ),
    "error": (
      "base": #ff5722,
    ),
    "info": (
      "base": #909399,
    ),
  ),
);

// dark.scss

@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors: (
    "primary": (
      "base": #000,
    ),
    "success": (
      "base": #8bc34a,
    ),
    "warning": (
      "base": #ffc107,
    ),
    "danger": (
      "base": #f56c6c,
    ),
    "error": (
      "base": #ff5722,
    ),
    "info": (
      "base": #909399,
    ),
  ),
);
@use 'element-plus/theme-chalk/src/dark/css-vars.scss';