element-uiグローバルカスタムテーマ

プロジェクトのSCSS変数を変更する

作成することに注意してくださいelement-variables.scss文件在/src/下,注意路径问题

ElementのテーマチョークはSCSSで記述されています。プロジェクトでSCSSも使用している場合は、プロジェクトのElementのスタイル変数を直接変更できます。新しいスタイルファイルを作成します。たとえば  element-variables.scss、次のように記述します。

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

/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

その後、上記のスタイルファイルをプロジェクトのエントリファイルに直接インポートします(ElementによってコンパイルされたCSSファイルをインポートする必要はありません)。

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)

フォントパス変数をオーバーライドする必要があることに注意してください。要素のアイコンアイコンが配置されている相対パスに割り当てるだけです。

この方法はより便利です 

おすすめ

転載: blog.csdn.net/SmartJunTao/article/details/108581823