之前的解决方案是从node_modules中的element plus拷贝出对应scss样式来,但是有同学指出,方案有问题。个人也觉得拷贝出来是在增加代码量。这两天参考了网上的写法以及其他作者的博客,重新总结了一套方法,方案如下。
一、准备
1、本次使用的是Vite来搭建项目,所以还有使用cli来构建的本方法不适应。建议换成vite来构建。
2、package.json安装如下依赖到devDependencies,这里注意要使用的npm指令
"unplugin-auto-import": "^0.5.11",
"unplugin-vue-components": "^0.19.3",
3、css预处理器使用scss
二、实现步骤
(1)主题定义
// index.scss
$--colors: (
"primary": (
"base": #00a063,
),
"success": (
"base": #21ba7f,
),
"warning": (
"base": #f2711c,
),
"danger": (
"base": #db2828,
),
"error": (
"base": #db2828,
),
"info": (
"base": #42b8dd,
),
);
// You should use them in scss, because we calculate it by sass.
// comment next lines to use default color
@forward "element-plus/theme-chalk/src/common/var.scss" with
(
// do not use same name, it will override.
$colors: $--colors,
$button-padding-horizontal: ("default": 50px)
);
// if you want to import all
// @use "element-plus/theme-chalk/src/index.scss" as *;
// You can comment it to hide debug info.
// @debug $--colors;
(2)在Vite.config.ts中进行配置和引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import path from 'path'
export default ({ mode }) => {
return defineConfig({
// 路径别名定义
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'components': path.resolve(__dirname, 'src/components'),
'views': path.resolve(__dirname, 'src/views')
}
},
// css全局处理
css: {
preprocessorOptions: {
scss: {
// 这里路径自己改,找到自己定义的scss文件
additionalData: `@use "@/assets/css/index.scss" as *;`,
}
}
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver({
importStyle: "sass",
})],
}),
Components({
// allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'],
// allow auto import and register components used in markdown
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
}),
],
dts: 'src/components.d.ts',
})
],
// vue-tsc --noEmit --skipLibCheck用来开启ts打包校验
build: {
assetsDir: './static',
chunkSizeWarningLimit: 500,
minify: 'terser',
terserOptions: {
compress: {
// warnings: false,
drop_console: true, //打包时删除console
drop_debugger: true, //打包时删除 debugger
pure_funcs: ['console.log'],
},
output: {
// 去掉注释内容
comments: true,
},
},
},
server: {
host: '0.0.0.0',
port: 8000,
cors: true,
proxy
}
})
}
三、注意
这里一定要注意!一定要注意!一定要注意! 当时我就是在这里卡住了,一直纳闷为什么引入错误。
如果你的element plus一开这样引入了,一定都去掉。因为饿了吗的源码里存在!important以及merge这种权重和样式合并类代码,自然把自定义都覆盖了。所以请去掉。