VUE基于sass换肤

注：首先确保当前项目已经安装且可以正常使用sass，本文不涉及sass的安装，如果还未安装，请自行安装，后面博主会单独写文章介绍sass的安装使用

色值：

 _variable.scss  创建色值配置文件，博主放在了 src/common/scss/ 目录下

$themes中的 default_theme 及 test_theme为匹配当前风格的关键字，此处仅配置了两套风格

@charset "utf-8";

$themes: (
  default_theme: (
    // 系统背景色
    color_theme: #1d2088,
    color_1: #000000,
    color_2: #999999,
    color_3: #00c6ff,
    color_29_32_136_1: rgba(29, 32, 136, 0.1),
    color_29_32_136_3: rgba(29, 32, 136, 0.3),
    color_gradient_1: linear-gradient(90deg, #102532, #162b3a 50%, #0f2430),
  ),
  test_theme: (
    // 系统背景色
    color_theme: #2ff22a,
    color_1: #333333,
    color_2: #666666,
    color_3: #32ccfc,
    color_29_32_136_1: rgba(29, 32, 136, 0.1),
    color_29_32_136_3: rgba(29, 32, 136, 0.3),
    color_gradient_1: linear-gradient(90deg, #102532, #162b3a 50%, #0f2430),
  ),
);

读取色值：

 _handle.scss  将配置好的色值读取并且抛出，该文件也放在了 src/common/scss/ 目录下

@import "./variable";

// 遍历主题
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    // !global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

// 获取系统背景色
@mixin bg_color_theme($color: null, $important: null) {
  @if $color!=null {
    background-color: $color;
  } @else {
    @if $important != null {
      @include themeify {
        background-color: themed("color_theme") $important;
      }
    } @else {
      @include themeify {
        background-color: themed("color_theme");
      }
    }
  }
}

@mixin bg_color_1($color: null) {
  @if $color!=null {
    background-color: $color;
  } @else {
    @include themeify {
      background-color: themed("color_1");
    }
  }
}

// 获取系统字体颜色
@mixin font_color_theme($color: null, $important: null) {
  @if $color!=null {
    color: $color;
  } @else {
    @include themeify {
      color: themed("color_theme") $important;
    }
  }
}

@mixin font_color_1($color: null) {
  @if $color!=null {
    color: $color;
  } @else {
    @include themeify {
      color: themed("color_1");
    }
  }
}

// 获取边框颜色
@mixin border_color_theme($color: null) {
  @if $color!=null {
    border-color: $color;
  } @else {
    @include themeify {
      border-color: themed("color_theme");
    }
  }
}

@mixin border_color_1($color: null) {
  @if $color!=null {
    border-color: $color;
  } @else {
    @include themeify {
      border-color: themed("color_1");
    }
  }
}

// 获取阴影颜色
@mixin shadow_color_1($h: 0, $v: 0, $blur: 0, $spread: 0, $inset: null, $color: null) {
  @if $color != null {
    box-shadow: $h $v $blur $spread $inset $color;
  } @else {
    @include themeify {
      box-shadow: $h $v $blur $spread $inset themed("color_1");
    }
  }
}

重置三方插件：

全局重写插件样式 index.scss  

此处仅用于element，其他插件使用请查看相关官方文档

博主放在了 src/common/styles/element/ 目录下

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: ( // 基本颜色
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #1D2088,
    ),
    'success': (
      'base': #15AD31,
    ),
    'warning': (
      'base': #FA8C15,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #E62412,
    ),
    'info': (
      'base': #CCCCCC,
    ),
  ),
  $font-size: ( // 字号
    'extra-large': 24px,
    'large': 18px,
    'medium': 16px,
    'base': 14px,
    'small': 14px,
    'extra-small': 14px,
  ),
  $button-font-size: (
    'small': 14px,  // 小号按钮字号
  ),
  $text-color: (
    'regular': #000000, // 常规字体颜色
    'secondary': #444559 // 二级字体颜色
  ),
  $table: (
    'header-bg-color': #F2F2F5, // 表格头背景色
  ),
  $border-color: ( // 边框颜色
    'base': #CCCCCC
  ),
);


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

重置指定样式：src/common/scss/ 目录下的 _handle.scss 文件

// 重置element样式使用
@mixin element_menu_bgcolor() {
  --el-menu-bg-color: themed("color_6");
}

皮肤风格设置：

 App.vue  入口文件配置皮肤的风格（当前为前端写死的选择项，可以接口获取或者其他用户选择修改）

mounted() {
    // 换肤：默认选择 default_theme 风格
    window.document.documentElement.setAttribute("data-theme", "default_theme");
}

混淆使用：

 _mixin.scss  在公共混淆文件或者项目文件中直接使用即可，当前文件依旧在src/common/scss/目录下

@charset "utf-8";
@import "./_reset.scss";
@import "./_common.scss";
@import "./_handle.scss";
@import "./_formGroup.scss";

// 首页菜单样式重置
.menu-box {
  .el-menu {
    @include element_menu_bgcolor;
  }
}

// 按钮样式
.common-button {
  font-size: 14px;
  @include font_color_4;
  @include bg_color_theme;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

全局挂载：

 vue.config.js 博主使用的是vue3，自己创建了该文件，如果vue2，请自行查找挂载方法

module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    plugins: [

    ]
  },
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "~@/common/styles/element/index.scss";
          @import "~@/common/scss/_mixin.scss";
        `
      }
    }
  },
}