vue3+elementplus+sass/scss安装配置教程：使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等

一、Element Plus

官方安装指南：https://element-plus.org/zh-CN/guide/installation

图标安装指南：https://element-plus.org/zh-CN/component/icon

1. 安装 element-plus、@element-plus/icons-vue

npm install element-plus --save
npm install @element-plus/icons-vue

2. 在main.js中导入并配置

/* src/main.js */

import { createApp } from 'vue'
import ElementPlus from 'element-plus'  // 引入 ElementPlus
import zhCn from 'element-plus/es/locale/lang/zh-cn'  // 引入中文模块
import 'element-plus/dist/index.css'  // 引入基础样式
import * as ElementPlusIconsVue from '@element-plus/icons-vue'  // 引入图标
import App from './App.vue'

const app = createApp(App)

// 全局注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 应用 ElementPlus 并全局配置
app.use(ElementPlus, {
  size: 'default',  // 设置表单组件的默认尺寸
  zIndex: 2000,  // 设置弹出组件的层级
  locale: zhCn,  // 设置组件默认语言
}).mount('#app')

3. 在 vue 中应用 ElementPlus 组件

组件指南：https://element-plus.org/zh-CN/component/overview

图标集合：https://element-plus.org/zh-CN/component/icon#icon-collection

<!-- example.vue -->
<template>
  <div>
    <!-- 结合 el-icon 为 SVG 图标提供属性 -->
    <el-icon :size="20" color="#409efc" style="vertical-align: middle">
      <Edit />
    </el-icon>
    <!-- 缓冲动画图标 -->
    <el-icon class="is-loading">
      <Loading />
    </el-icon>
    <!-- 或者直接使用 SVG 图标 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    
    <!-- 输入框 -->
    <el-input v-model="input" placeholder="请输入文本" clearable />
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: '',
    }
  }
}
</script>
<!-- （可选）scoped 隔离‌作用域，样式仅对当前组件生效 -->
<style scoped>
.el-input {
  width: 240px;
}
</style>

二、Sass/SCSS

官方安装指南：https://github.com/webpack/sass-loader#getting-started

语法学习文档：https://sass-lang.com/guide/

1. 安装 sass-loader、sass

npm install sass-loader sass --save-dev
# 若 ElementPlus 版本在 2.8.5 及以上，则 Sass 版本需为 1.79.0 及以上

2. 在assets下新建文件夹fonts，用于存放外部字体文件资源，同时新建文件index.scss引入字体

/* src/assets/fonts/index.scss */

@font-face {
  font-family: 'BankGothicBT-Light';  /* 自定义字体名称 */
  src: url('BankGothicBT-Light.otf');  /* 引入字体文件 */
  font-display: swap;  /* 优化加载体验，避免文字闪烁 */
}

@font-face {
  font-family: 'Inter-18pt-Light';
  src: url('Inter-18pt-Light.ttf');
  font-display: swap;
}

3. 在src下新建文件夹styles，styles下新建文件variables.scss、mixins.scss

• variables.scss（定义基础变量）

/* src/styles/variables.scss */

/* 默认主题样式 */
:root {
  --theme-primary: #409EFF;  /* 使用 -- 自定义属性 */
  --theme-success: #67C23A;
  --theme-warning: #E6A23C;
  --theme-danger: #F56C6C;
  --theme-info: #909399;
  --theme-primary-text: #303133;
  --font-base: 14px;
}

/* 定义基础变量 */
$primary: var(--theme-primary);  /* 使用 $ 自定义变量，var() 载入属性值 */
$success: var(--theme-success);
$warning: var(--theme-warning);
$danger: var(--theme-danger);
$info: var(--theme-info);
$primary-text: var(--theme-primary-text);
$base-font: var(--font-base);
$small-font: 12px;

• mixins.scss（封装样式模块）

/* src/styles/mixins.scss */

@import 'variables'

/* 使用 @mixin 封装样式模块（支持传参） ========================================= */

/* 段落 paragraph */
@mixin paragraph {
    font-size: $base-font;  /* 直接应用变量 */
    font-weight: normal;
    line-height: 1;
}

/* 文本溢出省略 text-truncated */
@mixin text-truncated($width) {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: $width;  /* 根据参数赋值 */
}

4. 在vue.config.js的 css 预处理配置中将 scss 变量和模块注入全局

/* vue.config.js */
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  css: {
    loaderOptions: {
      scss: {
        additionalData: `
          @import "~@/styles/variables.scss";
          @import "~@/styles/mixins.scss";
        `,
      },
    },
  },
  /* 其他配置项...... */
})

5. 在styles下新建样式文件common.scss、element.scss

• common.scss（全局通用样式）

/* src/styles/common.scss */

/* 全局通用样式 =================================================== */
body {
  padding: 0;
  margin: 0;
  color: $primary-text;
  font-size: $base-font;
}

p {
  @include paragraph;  /* 使用 @include 应用模块 */
  line-height: normal;  /* 可覆盖模块中的样式 */
  margin: 8px 0;
}

.truncated {
  @include text-truncated(100%);  /* 给模块传参 */
}

.flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.flex_s_b {
  @extend .flex;  /* 使用 @extend 继承样式 */
  justify-content: space-between;
}

• element.scss（修改 ElementPlus 组件样式）

/* src/styles/element.scss */

/* 重构主题系统 =================================================== */
:root {
  --el-color-primary: var(--theme-primary);
  --el-color-success: var(--theme-success);
  --el-color-warning: var(--theme-warning);
  --el-color-danger: var(--theme-danger);
  --el-color-info: var(--theme-info);
}

/* 修改组件样式 =================================================== */
/* 按钮 */
.el-button {
    border-radius: 0.4rem;
    border: none;
    /* 支持嵌套书写，直观反映层级结构 */
    svg {
        height: $base-font;
    }
    /* 使用 & 表示上级选择器 */
    &.el-button--small {
        border-radius: 0.3rem;

        svg {
            height: $small-font;
        }
    }
}
/* 表单 */
.el-form {
  .el-form-item {
    .el-form-item__content {
      @include paragraph;
      color: $primary-text;
    }
  }
}

6. 在main.js中导入样式文件

/* src/main.js */

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'

// 导入样式文件
import './assets/fonts/index.scss'  // 字体
import './styles/common.scss'  // 通用
import './styles/element.scss'  // 组件

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(ElementPlus, {
  size: 'default',
  zIndex: 2000,
  locale: zhCn,
}).mount('#app')

7. 在 vue 中使用 scss 书写样式

<!-- example.vue -->
<template>
  <div>
    <el-card shadow="hover">
      <p v-for="(item, index) in list" :key="index">{{ item }}</p>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ['第一项', '第二项', '第三项'],
    }
  }
}
</script>
<!-- 标记为 scss 语法编译 -->
<style scoped lang="scss">
.el-card {
  border-radius: .8rem;
  border: 1px solid $primary;

  p {
    @include paragraph;
    font-family: 'Inter-18pt-Light';  /* 直接应用字体 */
  }
}
</style>

三、切换主题样式

1. 在variables.scss中添加其他主题

/* src/styles/variables.scss */

/* 默认主题（其他主题需在此基础上修改） */
:root {
  --theme-primary: #409EFF;
  --theme-success: #67C23A;
  --theme-warning: #E6A23C;
  --theme-danger: #F56C6C;
  --theme-info: #909399;
  --theme-primary-text: #303133;
  --font-base: 14px;
}

/* 使用 [data-theme='名称'] 定义其他主题以覆盖默认值，切换主题时需匹配名称 */
[data-theme='purple'] {
  --theme-primary: #912CEE;
  --font-base: 13px;
}
[data-theme='green'] {
  --theme-primary: #337ECC;
  --theme-success: #529B2E;
}

/* 基础变量 */
$primary: var(--theme-primary);
$success: var(--theme-success);
$warning: var(--theme-warning);
$danger: var(--theme-danger);
$info: var(--theme-info);
$primary-text: var(--theme-primary-text);
$base-font: var(--font-base);
$small-font: 12px;

2. 在配置文件config.js中添加一项用于切换主题

请参考我之前的文章完成config.js配置：vue3在public下封装config.js自定义配置动态数据，可在打包后直接修改，方便后端部署及后续维护

/* public/config.js */
window.customConfig = {
  // 通过修改 THEME 值一键切换主题（仅当匹配到 data-theme 定义的名称时生效，否则保持默认）
  THEME: 'green',  // 应用主题 green
  // THEME: 'purple',  // 应用主题 purple
  // THEME: 'default',  // 应用默认主题
  
  /* 其他配置项...... */
}

3. 在App.vue中应用主题

/* src/App.vue */

export default {
  data() {
    return {}
  },
  mounted() {
    // 动态读取主题并应用到全局
    if (this.$httpConfig?.THEME) {
      document.documentElement.setAttribute('data-theme', this.$httpConfig.THEME)
    }
  },
}