vue3+vite+elementPlus修改elementPlus主题色

最新推荐文章于 2024-09-11 22:31:16 发布

萧寂173

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量278

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/weixin_68658847/article/details/142104143

版权

vue 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

安装模块

npm install sass
npm install -D unplugin-vue-components unplugin-auto-import

新建主题色文件

在src下新建styles文件夹,里面新建index.scss文件,内容如下:

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "white": #ffffff,
    "black": #000000,
    "primary": (
      "base": green, 
    ),
    "success": (
      "base": #67c23a, 
    ),
    "warning": (
      "base": #e6a23c, 
    ),
    "danger": (
      "base": #f56c6c, 
    ),
    "error": (
      "base": #f56c6c, 
    ),
    "info": (
      "base": #909399, 
    ),
  ),
  $font-size: (
    "extra-large": 20px,   
    "large": 18px,         
    "medium": 16px,        
    "base": 14px,          
    "small": 13px,         
    "extra-small": 12px,   
  )
);

在vite.config.js进行配置

主要有以下三个新增地方

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 新增一: 引入以下模块
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  server: {
    port: 8080,
    host: "0.0.0.0",
    cors: true,
  base: "./", 
  plugins: [
    vue(),
    // 新增二:加入以下插件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({importStyle:"sass"})],
    }),
  ], 
  resolve: {
    alias: {
      "@": "/src",
    },
  },
  //新增三: 使用 scss.additionalData 来编译应用 scss 变量的组件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/index.scss" as *;`
      }
    }
  }
});

重启项目即可

yarn run dev

启动项目会发现可能会有如下错误,也可能没有,可以直接忽略,没啥影响

PS E:\workproject\takeBean\Report> yarn run dev
yarn run v1.22.22
$ vite
Re-optimizing dependencies because vite config has changed

  VITE v5.2.11  ready in 486 ms

  ➜  Local:   http://localhost:8080/
  ➜  Network: http://192.168.1.92:8080/
  ➜  press h + enter to show help
Error: The following dependencies are imported but could not be resolved:

  @/assets/fonts/font.css (imported by E:/workproject/takeBean/Report/src/main.js)
  @/components/echarts/lineChart.vue (imported by E:/workproject/takeBean/Report/src/page/workout.vue?id=0)
  @/utils/index.js (imported by E:/workproject/takeBean/Report/src/page/workout_fullversion.vue?id=0)
  @/utils/food.js (imported by E:/workproject/takeBean/Report/src/page/workout_fullversion.vue?id=0)
  @/components/other/bottomButton.vue (imported by E:/workproject/takeBean/Report/src/page/workout_fullversion.vue?id=0)
  @/assets/image/add/bgc.png (imported by E:/workproject/takeBean/Report/src/page/workout_fullversion.vue?id=0)
  @/components/other/replacePhotoBtn.vue (imported by E:/workproject/takeBean/Report/src/page/workout.vue?id=0)
  @/assets/image/add/takeLogo.png (imported by E:/workproject/takeBean/Report/src/page/workout_fullversion.vue?id=0)
  @/assets/image/checkIn.png (imported by E:/workproject/takeBean/Report/src/page/session.vue?id=0)
  @/components/echarts/pieChart.vue (imported by E:/workproject/takeBean/Report/src/page/workout_fullversion.vue?id=0)
  @/assets/image/cloudred.png (imported by E:/workproject/takeBean/Report/src/page/session.vue?id=0)
  @/components/other/loadding.vue (imported by E:/workproject/takeBean/Report/src/page/workout_fullversion.vue?id=0)
  @/components/other/photoReplace.vue (imported by E:/workproject/takeBean/Report/src/page/session.vue?id=0)
  @/assets/image/Ranking.png (imported by E:/workproject/takeBean/Report/src/page/session.vue?id=0)
  @/store/index.js (imported by E:/workproject/takeBean/Report/src/page/workout_fullversion.vue?id=0)

Are they installed?
    at file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:52538:23
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:52004:38
17:17:04 [vite] Internal server error: Failed to resolve import "@/assets/fonts/font.css" from "src/main.js". Does the file exist?
  Plugin: vite:import-analysis
  File: E:/workproject/takeBean/Report/src/main.js:5:13
  3  |  import ElementPlus from 'element-plus'
  4  |  import 'element-plus/dist/index.css'
  5  |  import '@/assets/fonts/font.css'
     |              ^
  6  |  // 引入 echarts
  7  |  import * as echarts from 'echarts';
      at formatError (file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:50830:46)
      at TransformContext.error (file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:50824:19)
      at normalizeUrl (file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:66128:33)
      at async file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:66283:47
      at async Promise.all (index 4)
      at async TransformContext.transform (file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:66204:13)
      at async Object.transform (file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:51139:30)
      at async loadAndTransform (file:///E:/workproject/takeBean/Report/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:53894:29)
17:17:04 [vite] Pre-transform error: Failed to resolve import "@/assets/fonts/font.css" from "src/main.js". Does the file exist?
17:17:12 [vite] vite.config.js changed, restarting server...
17:17:12 [vite] page reload vite.config.js.timestamp-1725959832682-bbd7a08d3a225.mjs
Re-optimizing dependencies because vite config has changed
17:17:12 [vite] server restarted.
[@vue/compiler-sfc] `defineEmits` is a compiler macro and no longer needs to be imported.

17:17:14 [vite] ✨ new dependencies optimized: element-plus/es, element-plus/es/components/base/style/index, element-plus/es/components/button/style/index
17:17:14 [vite] ✨ optimized dependencies changed. reloading
Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> node_modules\element-plus\theme-chalk\src\mixins\_button.scss
159│     padding: $padding-vertical $padding-horizontal;
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\element-plus\theme-chalk\src\button.scss
71 │ ┌   & + & {
72 │ │     margin-left: 12px;
73 │ │   }
   │ └─── nested rule
   ╵
    node_modules\element-plus\theme-chalk\src\mixins\_button.scss 159:3  button-size()
    node_modules\element-plus\theme-chalk\src\button.scss 75:3           @content
    node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 60:5    b()
    node_modules\element-plus\theme-chalk\src\button.scss 23:1           root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> node_modules\element-plus\theme-chalk\src\mixins\_button.scss
160│     font-size: $font-size;
   │     ^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\element-plus\theme-chalk\src\button.scss
71 │ ┌   & + & {
72 │ │     margin-left: 12px;
73 │ │   }
   │ └─── nested rule
   ╵
    node_modules\element-plus\theme-chalk\src\mixins\_button.scss 160:3  button-size()
    node_modules\element-plus\theme-chalk\src\button.scss 75:3           @content
    node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 60:5    b()
    node_modules\element-plus\theme-chalk\src\button.scss 23:1           root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> node_modules\element-plus\theme-chalk\src\mixins\_button.scss
161│     border-radius: $border-radius;
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules\element-plus\theme-chalk\src\button.scss
71 │ ┌   & + & {
72 │ │     margin-left: 12px;
73 │ │   }
   │ └─── nested rule
   ╵
    node_modules\element-plus\theme-chalk\src\mixins\_button.scss 161:3  button-size()
    node_modules\element-plus\theme-chalk\src\button.scss 75:3           @content
    node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 60:5    b()
    node_modules\element-plus\theme-chalk\src\button.scss 23:1           root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ┌──> node_modules\element-plus\theme-chalk\src\mixins\_button.scss
159 │     padding: $padding-vertical $padding-horizontal;
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> node_modules\element-plus\theme-chalk\src\button.scss
282 │ ┌         & + span {
283 │ │           margin-left: map.get($button-icon-span-gap, $size);
284 │ │         }
    │ └─── nested rule
    ╵
    node_modules\element-plus\theme-chalk\src\mixins\_button.scss 159:3  button-size()
    node_modules\element-plus\theme-chalk\src\button.scss 287:7          @content
    node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 107:7   m()
    node_modules\element-plus\theme-chalk\src\button.scss 273:5          @content
    node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 60:5    b()
    node_modules\element-plus\theme-chalk\src\button.scss 23:1           root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ┌──> node_modules\element-plus\theme-chalk\src\mixins\_button.scss
160 │     font-size: $font-size;
    │     ^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> node_modules\element-plus\theme-chalk\src\button.scss
282 │ ┌         & + span {
283 │ │           margin-left: map.get($button-icon-span-gap, $size);
284 │ │         }
    │ └─── nested rule
    ╵
    node_modules\element-plus\theme-chalk\src\mixins\_button.scss 160:3  button-size()
    node_modules\element-plus\theme-chalk\src\button.scss 287:7          @content
    node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 107:7   m()
    node_modules\element-plus\theme-chalk\src\button.scss 273:5          @content
    node_modules\element-plus\theme-chalk\src\mixins\mixins.scss 60:5    b()
    node_modules\element-plus\theme-chalk\src\button.scss 23:1           root stylesheet

Warning: 4 repetitive deprecation warnings omitted.