版本信息
| 内容 | 版本 |
|---|---|
| @vue/cli | 5.0.x |
| node | 16.14.x |
"dependencies": {
"element-plus": "^2.1.10",
"vue": "^3.2.33",
},
"devDependencies": {
"sass": "^1.50.1",
"sass-loader": "^10.2.1"
}
ElementPlus安装使用（参考官方）
ElementPlus 安装
ElementPlus 快速上手
ElementPlus 国际化
补充说明
亦可通过如下命令安装，“非最新版本，且与 Vue3.2.x 版本存在兼容问题”：
npm add element-plus
ElementPlus修改主题颜色
过程问题
1. 引用错误
ERROR Failed to compile with 1 error 09:04:20
error in ./src/**/element-variables.scss
Syntax Error: SassError: Can't find stylesheet to import.
?
2 │ @import "~element-plus/packages/theme-chalk/src/index";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
?
src/**/element-variables.scss 2:9 root stylesheet
查看 /node_modules/element-plus，可发现 /theme-chalk 目录于 1.1.x 至当前发文版本，路径已被调整更新，可参考修改如下：
@import "~element-plus/theme-chalk/src/index";
2. 修改颜色未生效
/* 改变主题色变量 */
$--color-primary: teal;
经版本抽样检验，以上修改仅 1.2.x 之前版本才有效。后续至当前发文版本，可参考修改如下：
第1步，新增文件，如 /assets/**/element.scss，补充如下示例代码：
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': teal,
),
),
);
提示：如在 element-variables.scss 中直接添加，由于是在 main.js 中引用，会出现 “SassError: @forward rules must be written before any other rules.” 异常。
第2步，于 vue.config.js 中添加上述文件引用，参考如下：
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/**/element.scss";`
},
},
},
}
第3步，重新 run 项目，即可验证最终效果。
