Set elementplus theme color (global setting)

First create a style folder under the src folder, and then create an element folder under the style folder

Create another scss file

The file directory is as follows

If we want to set the theme color for elementplus

In the style.scss file

First use @forwardto import the variables of Element Plus, and then set the theme color of elementplus

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #1baeae,
    ),
  ),
);

In this way, we have completed the setting of the theme color of the component library, if we want to use it in the component

<style lang="scss" scoped>
@import "@/style/element/custom-element.scss";
</style>

But if we want to use it globally in the whole project

main.jsUse importthe statement to import the scss file in

import './style/element/style.scss';

We need to configure the vite.config.js file

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/styles/element/element.scss";'
      }
    }
  }
}