Element-plus scss 样式覆盖无效

根据Element-plus官方文档配置按需导入：

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

但是没有生效。而且我发现 styles/element/index.scss 在html头部中的位置于 element-plus的css之前，这意味着，不管我怎么覆写ele的样式，都不会生效。

尝试了很多种方法，误打误撞的发现在 vite.config.ts 里边按需导入element-plus组件的配置中修改如下能够解决问题:

      // vite.config.ts
      // 按需导入element-plus组件
      Components({
        resolvers: [ElementPlusResolver({
          importStyle: 'sass',
        })],
        dts: 'src/types/components.d.ts'
      }),

项目配置参考：

github.com/element-plu…

gitee.com/adensky/ele…