elementPlus カスタムテーマ

問題の背景

1. 実際の要件は、UI が独自のカラーシステムを持つことです。これは、要素のデフォルトの青色スタイルとは明らかに異なります。コンポーネントのスタイルオーバーライドを使用して変更するのではなく、テーマの色をカスタマイズして変更する必要があります。それは大変な作業になるためです。
2. 色々な記事を探しましたが、内容はかなりごちゃごちゃしていて、とにかく色々なものがごちゃ混ぜになっています。それは自分で理解する必要があります。
3. 実際、カスタムテーマは elementPlus のインポート方法に関連していますが、多くの記事では独自のインポート方法についてはまったく触れられていません。とにかく、プロジェクト内のテーマの色を変更した後、それが送信されます。

効果: デフォルトの青を緑に変更します。
画像.png

1. カスタムテーマを完全にインポートします（Element-plusを完全にインポートする場合は、こちらを参照してください）

a. elementPlus を完全にインポートします
画像.png
b. テーマをカスタマイズし、assets の下の css に element.scss ファイルを書き込みます

c. scss ファイルを解析するために scss をインストールします

npm i sass -D

d. main.ts に記述した scss ファイルをインポートします
1. 元から element-plus にインポートした css ファイルをコメントアウトする必要があることに注意してください
2. 独自のスタイルファイルをインポートします
画像.png

import { createApp } from 'vue'

  import App from './App.vue'
  import ElementPlus from 'element-plus'
  //引入element-plus相关样式
  // import 'element-plus/dist/index.css'
  // 引入覆盖的scss样式
  import './assets/css/element.scss'

  const app = createApp(App)
  app.use(ElementPlus)

  app.mount('#app')

デモのアドレス: https://gitee.com/rui-rui-an/vue3elementstyle

2. オンデマンドで elementPlus カスタムテーマをインポートします (オンデマンドでインポートする場合は、これを参照してください)

a. 必要に応じて elementPlus をインポートします

b. テーマをカスタマイズし、assets の下の CSS に element.scss ファイルを書き込みます。
画像.png
c. scss をインストールして scss ファイルを解析します。

npm i sass -D

d. scss ファイルを vue.config.ts にインポートします。
設定する必要がある場所が 2 か所あり、どちらも必須であることに注意してください。

scss ファイルを解析する

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      },
    },
  },

オンデマンドでインポートすると、コンポーネントの sass ファイルが読み込まれるため、作成した scss で上書きできます。

 Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),

デモのアドレス: https://gitee.com/rui-rui-an/vue3elementstyle2

3.Element-Plus カスタムテーマを手動でインポートする

a. 手動でインポートしたパッケージをインストールする

npm i unplugin-vue-components unplugin-element-plus -D

b. vue.config.ts で設定する

import ElementPlus from 'unplugin-element-plus/vite'
plugins: [
  vue(),
  ElementPlus({
    
     useSource: true,})
  // ...
],

画像.png
c. コンポーネントを手動でインポートして登録します

c. テーマをカスタマイズし、Assets の下の CSS に element.scss ファイルを書き込みます

d. vue.config.ts に scss ファイルを導入します

plugins: [
    vue(),
    ElementPlus({
    
     useSource: true,})
    // ...
  ],
css: {
    
    
    preprocessorOptions: {
    
    
      scss: {
    
    
        additionalData: `@use "@/assets/css/element.scss" as *;`,
      },
    },
  },

画像.png

デモのアドレス: https://gitee.com/rui-rui-an/vue3elementstyle3

~~記事を書くことに好き嫌いなんてあるわけがない、ただの頭が悪いだけだ~~