按照element官网的流程,把按需引入配置好,这里不进行多余的赘述
安装sass
npm install sass
新建scss文件:src/assets/style/element-theme.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (
"primary": ("base": #2260FF),
"success": ("base": #16BA3A),
"warning": ("base": #FF771C),
"danger": ("base": #ff3030),
"error": ("base": #ff3030),
"info": ("base": #909399),
)
);
在vite.config.js
进行配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver({ importStyle: "sass" })],
}),
Components({
resolvers: [ElementPlusResolver({ importStyle: "sass" })],
})
],
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/assets/style/element-theme.scss" as *;`,
},
},
},
resolve: {
alias: {
"@": path.resolve(__dirname, "src")
}
}
})