如何定制(scss变量替换方案)
1、安装 scss
npm i sass -D
2、准备定制样式文件
src/styles/element/index.scss
// index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
'primary': (
// 自定义颜色
'base':#27ba9b
),
'success': (
'base':#1dc779
),
'warning': (
'base':#ffb302
),
'danger': (
'base':#e26237
),
'error': (
'base':#cf4444
)
)
);
3、对 ElementPlus 样式进行覆盖
3.1 配置 ElementPlus 采用 sass 样式配色系统
// vite.config.js
export default defineConfig({
plugins: [
// ...
Components({
resolvers: [ElementPlusResolver({importStyle: "sass"})],
})
],
})
3.2 自动导入定制化样式文件进行样式覆盖
// vite.config.js
export default defineConfig({
// ...
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "@/styles/element/index.scss" as *;
`
}
}
}
})