vue3项目引入全局主题色_vue3自定义全局主题色

1、创建common.less文件

我这里的路径是src/assets/less/common.less，这个可自己决定

:root {
  --body-bg: #f4f4f4;
 
  --color-brand: #060101;
 
  --header-height: 48px; // 头部内容高度/一级、二级菜单title高度
  --header-size: 16px;
 
  --nav-collapse-height: 44px; // 导航 展开/收起 高度
  --nav-transition-time: 0.2s; // 导航nav过渡时间
  --nav-size: 16px;
  --nav-border-width: 1px;
 
  --nav-item-height: 44px;
  --nav-item-icon-size: 20px;
 
  --nav-hover-min-width: 128px; // 导航滑过最小宽度
  --nav-hover-title-height: 56px;
  --nav-hover-item-height: 36px;
  // --nav-sub-title-height: 56px;
  --nav-sub-item-height: 36px;
}
 
body {
  background-color: var(--body-bg);
}
 
// 右侧容器
.right-content {
  width: 100%;
}
 
// 颜色
.color--success {
  color: var(--el-color-success);
}
.color--error {
  color: var(--el-color-error);
}
.color--danger {
  color: var(--el-color-danger) !important;
}
.color--info {
  color: var(--el-color-info);
}
.color--primary {
  color: var(--el-color-primary);
}
 
// 文件上传
.upload-wrapper {
  .el-upload {
    width: 100%;
    height: 100%;
    .el-upload-dragger {
      width: 100%;
      height: 100%;
      padding: 0;
    }
  }
 
  .el-icon.icon-plus {
    width: 100%;
    height: 100%;
    text-align: center;
  }
 
  .el-loading-mask {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
  }
}

2、以下两种任选其一即可

1）在vite.config.js中添加以下代码

只看css即可

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
 
import { viteObfuscateFile } from 'vite-plugin-obfuscator'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
// 以下三项引入是为配置Element-plus自动按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig(
  ({ mode, command }: { mode: 'prod' | 'test' | 'dev'; command: 'build' | 'serve' }) => {
    const isProd = mode === 'prod'
 
    const isRun = command === 'serve'
    console.log('isRun:', isRun)
 
    return {
      build: {
        outDir: '../dist/end/end-' + mode,
        minify: 'terser',
        terserOptions: {
          compress: {
            drop_console: isProd,
            drop_debugger: isProd,
          },
        },
      },
      plugins: [
        vue(),
 
        // 以下两项是为配置Element-plus自动按需导入
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
 
        // viteObfuscateFile 配置项参考：https://github.com/javascript-obfuscator/javascript-obfuscator#javascript-obfuscator-options
        viteObfuscateFile({
          stringArray: false, // 为 true 会导致element-plus样式丢失
        }),
 
        // svg
        createSvgIconsPlugin({
          iconDirs: [
            resolve(__dirname, './src/assets/svg/common'),
            resolve(__dirname, './src/assets/svg/nav'),
            resolve(__dirname, './src/assets/svg/home'),
            resolve(__dirname, './src/assets/svg/wisdom'),
          ],
          symbolId: 'icon-[dir]-[name]',
        }),
      ],
      resolve: {
        alias: [
          {
            find: '@',
            replacement: resolve(__dirname, './src'),
          },
          {
            find: '@/*',
            replacement: resolve(__dirname, './src/*'),
          },
          {
            find: '@common',
            replacement: resolve(__dirname, '../common'),
          },
          {
            find: '@common/*',
            replacement: resolve(__dirname, '../common/*'),
          },
        ],
      },
      server: {
        port: 3000,
        host: '0.0.0.0',
        proxy: {
          '/api': {
            target: isProd ? 'https://xxxx.com' : 'http://test.xxxx.com',
            changeOrigin: true,
            rewrite: path => path.replace(/^\/api/, '/api'),
          },
        },
      },
      // 定义less全局变量
      css: {
        preprocessorOptions: {
          less: {
            charset: false,
            additionalData: `@import "${resolve(__dirname, 'src/assets/less/common.less')}";`,
          },
        },
      },
    }
  },
)

2）在main.js中添加以下代码

import './src/assets/less/common.less'

3、现在就可以在全局使用自定义的主题色啦

.form-container {
    background: var(--bg-light-1);
    padding: 20px 12px 0;
    overflow: hidden;
  }