Vue3+Vite+Sass 自定义Element-Plus主题色_vue3 修改element plus默认主题色

使用Vue3+Vite 自定义Element-Plus主题色，步骤如下:

1.安装样式处理器以及自动导入依赖

# sass
npm install -D sass

# element-plus官方文档中自动引入所需的两个依赖
npm install -D unplugin-vue-components unplugin-auto-import
1
2
3
4
5

2.配置vite.config.ts文件

//vite.config.ts
// 导入 自动按需导入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-compone

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.新建文件夹 src/styles/element/index.scss

//src/styles/element/index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (
        "primary": ("base": green),
    )
);
1
2
3
4
5

4.配置vite.config.ts文件

//vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
   //注意  样式文件以sass格式导入
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    })
  ],
  //使用 scss.additionalData 来编译应用 scss 变量的组件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注意：

1. scss文件的引入路径是否正确
2. @use ‘xxx.scss’ as *; 代替 @import ‘xxx.scss’;

---

到这之后，在项目中的默认色就变成自定义的颜色了。