Vue3.2.x 协同 ElementPlus2.1.x 与主题颜色修改_@forward rules must be written before any other ru

版本信息

"dependencies": {
  "element-plus": "^2.1.10",
  "vue": "^3.2.33",
},
"devDependencies": {
  "sass": "^1.50.1",
  "sass-loader": "^10.2.1"
}
1
2
3
4
5
6
7
8

ElementPlus安装使用（参考官方）

ElementPlus 安装
ElementPlus 快速上手
ElementPlus 国际化

补充说明

亦可通过如下命令安装，“非最新版本，且与 Vue3.2.x 版本存在兼容问题”：

npm add element-plus

ElementPlus修改主题颜色

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
1
2
3
4
5
6
7
8
9
10

查看 /node_modules/element-plus，可发现 /theme-chalk 目录于 1.1.x 至当前发文版本，路径已被调整更新，可参考修改如下：

@import "~element-plus/theme-chalk/src/index";
1

2. 修改颜色未生效

/* 改变主题色变量 */ 
$--color-primary: teal;
1
2

经版本抽样检验，以上修改仅 1.2.x 之前版本才有效。后续至当前发文版本，可参考修改如下：

第1步，新增文件，如 /assets/**/element.scss，补充如下示例代码：

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
 $colors: (
   'primary': (
     'base': teal,
   ),
 ),
);
1
2
3
4
5
6
7

提示：如在 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";`
      },
    },
  },
}
1
2
3
4
5
6
7
8
9
10

第3步，重新 run 项目，即可验证最终效果。