vue3+vite+elementPlus修改elementPlus主题色
安装模块
js
npm install sass
npm install -D unplugin-vue-components unplugin-auto-import新建主题色文件
在src下新建styles文件夹,里面新建index.scss文件,内容如下:
css
@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进行配置
主要有以下三个新增地方
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 *;`
}
}
}
});重启项目即可
js
yarn run dev启动项目会发现可能会有如下错误,也可能没有,可以直接忽略,没啥影响
js
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.