elementplus のテーマカラーを設定する (グローバル設定)

まずsrcフォルダーの下にstyleフォルダーを作成し、次にstyleフォルダーの下に要素フォルダーを作成します。

別の scss ファイルを作成する

ファイルディレクトリは以下の通りです

elementplusのテーマカラーを設定したい場合

style.scss ファイル内

最初に@forwardElement Plus の変数をインポートするために使用し、次に elementplus のテーマカラーを設定します。

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

このようにして、コンポーネントライブラリのテーマカラーをコンポーネントで使用する場合の設定が完了しました。

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

ただし、プロジェクト全体でグローバルに使用したい場合は、

ステートメントをmain.js使用してscss ファイルをインポートしますimport

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

vite.config.js ファイルを設定する必要があります

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