1. 准备好自己的scss文件,例如styles/var.scss
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;
2. 在vite.config.js中间中添加 @use "@/styles/var.scss" as *;(注意要放在` `的里面)
import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// 按需引入element-plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
//导入自定义样式主题
import ElementPlus from 'unplugin-element-plus/vite'
//使用自定义颜色样式表设置-start
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), AutoImport({
resolvers: [ElementPlusResolver()],
}), Components({
resolvers: [//采用sass配置颜色
ElementPlusResolver({importStyle: "sass"})],
}),
], resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}, css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/element/index.scss" as *;
@use "@/styles/var.scss" as *;`,
},
},
},
})
//使用自定义颜色样式表设置-end
3.测试是否生效,去app.vue
<script setup>
</script>
<template>
<el-button type="primary">Hello World</el-button>
<el-button type="primary">11</el-button>
<div class="test"> lalalalla</div>
<router-view/>
</template>
<style scoped lang="scss">
.test{
color: $sucColor;
}
</style>