vue3 使用element-plus按需引入插件时,自定义颜色主题失效
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一、vite.config.js 重点代码:
(完整代码在下面)
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: 'sass'
})
],
}),
Components({
resolvers: [
ElementPlusResolver({
// 自动引入修改主题色添加这一行,使用预处理样式
importStyle: "sass",
}),
],
}),
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/assets/styles/theme.scss" as *;`
}
},
}
二、main.js不要引入theme
// import './assets/styles/theme.scss';
三、theme.scss中最后一行要去掉
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'white': #ffffff,
'black': #000000,
'primary': (
// 'base': #409eff,
'base': #e6a23c,
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
),
);
// @use "element-plus/theme-chalk/src/index.scss" as *;
附
vite.config.js
完整代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import compressPlugin from 'vite-plugin-compression'
// element-plus 按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
base: '/', // 设置打包路径,默认为 /
plugins: [
vue(),
compressPlugin({
threshold: 3072, //3KB 仅压缩文件大小大于此阈值的文件
deleteOriginFile: true, // 是否删除原始文件
verbose: false // boolean true 是否在控制台中输出压缩结果
}),
AutoImport({
resolvers: [
ElementPlusResolver({
importStyle: 'sass'
})
],
}),
Components({
resolvers: [
ElementPlusResolver({
// 自动引入修改主题色添加这一行,使用预处理样式
importStyle: "sass",
}),
],
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
server: {
port: 6699,
host: '0.0.0.0',
proxy: {
'/api': {
target: 'http://localhost:8091', //目标url
changeOrigin: true, //支持跨域
rewrite: (path) => path.replace(/^\/api/, ""),
//重写路径,替换/api
}
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/assets/styles/theme.scss" as *;`
}
},
}
})
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)