element-plus的主题配置

vite.config.ts

import { fileURLToPath, URL } from "node:url";
import path from 'path'
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
// element-plus 自动按需加载
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({
    // publicPath: '',//任意路径都能访问
    // outputDir: 'dist/data-web',//默认打包到dist/data-web的文件夹下
    plugins: [vue(), vueJsx(),
    // element-plus 自动按需加载
    AutoImport({
        resolvers: [ElementPlusResolver({
            // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
            importStyle: "sass",
        })],
    }),
    Components({
        resolvers: [ElementPlusResolver({
            //  ---!!! 主题文件解析
            importStyle: "sass",
        })],
    }),
    Components({
        resolvers: [ElementPlusResolver({
            //   ---!!! 主题文件解析 
            importStyle: "sass",
        })],
    }),
    ],
    css: {
        preprocessorOptions: {
            scss: {
                //https://blog.csdn.net/weixin_42074421/article/details/122083789
                additionalData: `@use "~/assets/styles/element/index.scss" as *;`,---!!! 主题文件解析 
            },
        },
    },
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
            '~/': `${pathSrc}/`,
        },
    },
    server: {
        open: true,
        host: '0.0.0.0',
        proxy: {
            '/api': { // 匹配请求路径，localhost:3000/snow
                // target: 'http://172.30.30.48:7001/', // 代理的目标地址 http://172.30.30.205:7001
                target: 'http://172.30.30.205:7003/adx-service/', // 代理到新adx的后台的接口地址
                changeOrigin: true, // 开发模式，默认的origin是真实的 origin:localhost:3000 代理服务会把origin修改为目标地址
                // secure: true, // 是否https接口
                // ws: true, // 是否代理websockets
                // rewrite target目标地址 + '/abc'，如果接口是这样的，那么不用重写
                // rewrite: (path) => path.replace(/^\/snow/, '') // 路径重写，本项目不需要重写
            }
        }
    },
});

其中加载代码代码是必不可少的或点击查看这位博主的

  Components({
        resolvers: [ElementPlusResolver({
            //  !!! 主题文件解析 不可少了这个
            importStyle: "sass",
        })],
    }),
    Components({
        resolvers: [ElementPlusResolver({
            //   !!! 主题文件解析  不可少了这个
            importStyle: "sass",
        })],
    }),
    ],
    css: {
        preprocessorOptions: {
            scss: {
                //https://blog.csdn.net/weixin_42074421/article/details/122083789
                additionalData: `@use "~/assets/styles/element/index.scss" as *;`,---!!! 主题文件解析 
            },
        },
    },

是一个主题测试文件

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #3F9A12,
    ),
    "success": (
      "base": #67C23A,
    ),
    "warning": (
      "base": #E6A23C,
    ),
    "danger": (
      "base": #F56C6C,
    ),
    "error": (
      "base": #F56C6C,
    ),
    "info": (
      "base": #909399,
    ),
  ),
 
  $button-padding-horizontal: (
    "default": 80px
  )
);

配置中的报错

使用@use的文件不能重复

不能再main.ts文件中引用，然后又在 css.preprocessorOptions.additionalData 中又引用，这样会重复引用

vite.config.ts

 css: {
        preprocessorOptions: {
            scss: {
                //https://blog.csdn.net/weixin_42074421/article/details/122083789
                additionalData: `@use "~/assets/styles/element/index.scss" as *;`,---!!! 主题文件解析 
            },
        },
    },